Status
The status of the component
Status
The status of the component
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
When there are multiple actions of the same category that need to be presented, the action button may be used.
Use the basic button when there is only 1 action option available.
Avoid using the action button when there is only 1 action available.
Use the action button when there are multiple action options available (especially if the actions are all considered primary). This may be particularly true with there is a lack of real estate.
Avoid listing out the individual action options with basic buttons. This is especially true of the primary button as there should only be 1 primary button per application area.
Use clear and to-the-point language.
Limit the label length and do not use punctuation marks.
Button labels should always be in title case.
Text formats aside from title case should not be used.
Spark’s buttons allow icons to be placed next to the labels or icon-only buttons!
Learn more about when to use them below:
Icon + label helps the user to scan and find actions easier when there are a lot of elements in a space, for example:Â
Although most of our buttons offer the option to have icons on either side of the label, we strongly recommend adding the icon BEFORE the label, since that makes it easier for people to scan content.
Contrary to icon-only buttons, these allow us to convey more vague or less common actions since the label is always visible. However, we strongly advise against using them in CTA actions since, given the nature of CTAs, we want the user to have the actions as clear as possible, even if that means that they have to stop a little bit to read the whole label instead of just scanning it.
Table toolbars are a great option for buttons with icons!
Avoid using icons on form CTAs
Icon-only buttons should be only used when the space is limited or when we want to reduce the cognitive load of a page, but the main caveat is that we should only use icon-only buttons with icons that are pretty much universally understood, for example:Â
The user should never encounter an icon that conveys vague meaning, even though all of our icons have a tooltip that gives further context to the user when hovers over it, the user should be hovering through every single icon-only button.
Use icon-only buttons if and only if the icon is universally recognized.
We recommend always putting the trigger of dangerous actions under a confirmation modal. With that said, when talking about dangerous action buttons, we should never use a generic label like “Ok” or “Continue” since users are used to seeing them and might just click them by intuition, instead, we recommend always putting the verb/action at the forefront, for example, if the action is going to delete a key, the label should be “Delete key”.
Use dangerous actions within a confirmation modal, and always put the action it will be performing as its label.
Avoid using labels that don’t explain the action the danger button is about to perform like “Confirm”, “Accept”, or “Continue”.
In order to have a more subtle dismiss action in relevant components, the Dismiss Button is used instead of an icon-only Button variant.
Components that use the Dismiss Button are:
Side Sheet
Modal
Popover (shown in the example above)
Toast