Button

An interface element that handles click events and user interactions.

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: February 05, 2024

Design

Structure

Buttons consist of a container, text label, and, optionally, an icon. The container’s appearance varies based on the button's semantic meaning (primary, secondary, tertiary, destructive) and state (normal, hover, disabled, active). The text label communicates the action the button performs, and icons are used to enhance the meaning or importance of the action.

  • Container: The visual holder of the button's content, styled to reflect the button's state and importance.
  • Text: Describes the action the button will perform, using a concise and action-oriented language.
  • Icon: Provides additional visual cues about the button's action or purpose. Icons should be aligned left or right of the text. Only approved icons should be used in buttons.

 

Types

Default

Default

Icon-only

Icon-only

An icon-only version of the button that is used when limited space is available. Icon-only buttons are always paired with a delayed tooltip (300ms) when hovered that describes the action.

Text

Text

Text buttons should be used in places where the element performs an action. While it looks similar to a link, the link should be reserved for when the component takes you to a different URL (or is an html element).

Sizes

🟢 Button / variant=Primary, size=Large, state=default

🟢 Button / variant=Primary, size=Large, state=default

🟢 Icon Button / variant=Primary, size=Large, state=default

🟢 Icon Button / variant=Primary, size=Large, state=default

🟢 Button / variant=Primary, size=Medium, state=default

🟢 Button / variant=Primary, size=Medium, state=default

🟢 Icon Button / variant=Primary, size=Medium, state=default

🟢 Icon Button / variant=Primary, size=Medium, state=default

🟢 Button / variant=Primary, size=Small, state=default

🟢 Button / variant=Primary, size=Small, state=default

🟢 Icon Button / variant=Primary, size=Small, state=default

🟢 Icon Button / variant=Primary, size=Small, state=default

 

 

Variants

  • Primary Button: Use for the main action on a page or modal, such as "Save," "Submit," or "Continue."
Default

Default

Focused

Focused

Hover

Hover

Active/Pressed

Active/Pressed

Loading

Loading

Disabled

Disabled

 

  • Secondary Button: Use for less important actions or supporting actions like "Cancel" or "Back."
Default

Default

Focused

Focused

Hover

Hover

Active/Pressed

Active/Pressed

Loading

Loading

Disabled

Disabled

 

  • Ghost (Tertiary) Button: Use for less prominent actions, often without a background (until hovering), like "Learn More" or "Help."
Default

Default

Focused

Focused

Hover

Hover

Active/Pressed

Active/Pressed

Loading

Loading

Disabled

Disabled

 

  • Destructive Button: Use for when the destructive action is the primary action, such as "Delete" or "Archive."
Default

Default

Focused

Focused

Hover

Hover

Active/Pressed

Active/Pressed

Loading

Loading

Disabled

Disabled

 

  • Destructive (Secondary) Button: Use for when the destructive action is followed by a next step or confirmation modal.
Default

Default

Focused

Focused

Hover

Hover

Active/Pressed

Active/Pressed

Loading

Loading

Disabled

Disabled

 

  • Success (Ghost) Button: Use for when the an item can be created in the interface, but is not the primary action (use sparingly).
Default

Default

Focused

Focused

Hover

Hover

Active/Pressed

Active/Pressed

Loading

Loading

Disabled

Disabled

 

 

Icon variations

Standard icon right variants
Standard icon left variants
Standard icon right variants
  • Icon left: this is the most common variant of the three. The icon should correspond to the action mentioned in the label of the button.
  • Icon right: generally reserved for situations when the primary button is used as a trigger for the Action menu component.
  • Icon left and right: this is used in places like the campaign or template index, where the primary button for create is used as a trigger to the Action Menu, allowing the marketer to then select the medium for the new resource.

Loading

  • There is a loading prop on the button that includes the loading spinner when there is an async process occurring after the action is taken.

Guidelines

  • Use concise and clear language for button labels
  • Ensure the button's action is easily understood by users
  • Use icons to enhance comprehension, not replace text
  • Overload a page with too many primary buttons to avoid decision paralysis
  • Use technical jargon or ambiguous terms in labels
  • Place buttons too close to each other, risking accidental clicks

 

Content

  • Labeling: Button labels should be written in Sentence case, with only the first letter of the first word capitalized unless using proper nouns or acronyms.
  • Length: Keep button text short to maintain clarity and usability. Ideally, use no more than three words.

Accessibility

  • Keyboard Navigation: Ensure all buttons are accessible through keyboard navigation using the Tab and Shift + Tab keys to navigate forward and backward.
  • Focus Indicators: Provide clear focus indicators for keyboard navigation, such as a border highlight.
  • Aria Labels: Use aria-label for buttons with icons but no text, ensuring screen readers can accurately convey the button's purpose.
  • Contrast: Maintain high contrast between button text/icons and their backgrounds to comply with WCAG 2.1 guidelines for text and non-text contrast.
  • Adaptive: Buttons should be easily clickable across devices, with a minimum target area to accommodate various input methods, including touch, stylus, and mouse.

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy