Button is used to trigger actions based on a user's interaction.
- Button text should be written in sentence case
- Avoid using multiple
Primarybuttons in a workflow
- A button containing no text should be paired with a label or tooltip
- Common button actions should be placed in a similar location from flow to flow, .e.g. “Export Report”, “Save Changes”, etc…
- Don’t override default font size, space or color theme values (unless using the
- Behind the scenes,
Buttoncan function as an anchor or button, in both cases, the styling remains the same. If you need a
Buttonthat looks like an
anchor, use the
Default is minimally themed, with no set background or foreground styles. Use this style for things like interactive Icons, navigation and message bubble actions.
Primary buttons are used for highlighting important actions within a page or workflow. Use Primary sparingly, as overuse can cause confusion to a user.
Secondary is intended for general use buttons and actions like triggering popouts, filtering and sharing actions. This is typically the most appropriate button type because of its neutral visual weight.
This type of button can be used to warn a user of potentially destructive actions such as removing a profile, deleting a message from a network or abandoning an unsaved workflow.
Placeholder can be used for adding a subtle action without affecting the hierarchy of a workflow.
The button component has an optional
active state which allows the “active” button state to be enabled without user interaction. Use the
active state to associate a button with a related element, such as an open popout.