Basic Button

An interactive element in various styles that allows users to take actions.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

Usage


When to use a Basic Button VS Action Button

When there are multiple actions of the same category that need to be presented, the action button may be used.

Do

Use the basic button when there is only 1 action option available.

Don't

Avoid using the action button when there is only 1 action available.

Do

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.

Don't

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 concise labels

Do

Use clear and to-the-point language.

Don't

Limit the label length and do not use punctuation marks.

Use clear and direct language

Do

Button labels should always be in title case.

Don't

Text formats aside from title case should not be used.

Icons on buttons

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 buttons

Icon + label helps the user to scan and find actions easier when there are a lot of elements in a space, for example: 

  • A table toolbar with multiple buttons

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.

Do

Table toolbars are a great option for buttons with icons!

Don't

Avoid using icons on form CTAs

Icon-only buttons

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: 

  • An X icon to represent a dismissed action
  • A floppy disk icon to represent save
  • A pencil icon to represent the edit
  • A trash can icon to represent deletion (See dangerous actions for more info)

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.

Do

Use icon-only buttons if and only if the icon is universally recognized.

Dangerous actions

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”.

Do

Use dangerous actions within a confirmation modal, and always put the action it will be performing as its label.

Don't

Avoid using labels that don’t explain the action the danger button is about to perform like “Confirm”, “Accept”, or “Continue”.

Dismiss Button

In order to have a more subtle dismiss action in relevant components, the Dismiss Button is used instead of an icon-only Button variant.

Dismiss BTN Example

Dismiss BTN Example

Components that use the Dismiss Button are:
Side Sheet
Modal
Popover (shown in the example above)
Toast