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
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 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).
Primary Button: Use for the main action on a page or modal, such as "Save," "Submit," or "Continue."
Default
Focused
Hover
Active/Pressed
Loading
Disabled
Secondary Button: Use for less important actions or supporting actions like "Cancel" or "Back."
Default
Focused
Hover
Active/Pressed
Loading
Disabled
Ghost (Tertiary) Button: Use for less prominent actions, often without a background (until hovering), like "Learn More" or "Help."
Default
Focused
Hover
Active/Pressed
Loading
Disabled
Destructive Button: Use for when the destructive action is the primary action, such as "Delete" or "Archive."
Default
Focused
Hover
Active/Pressed
Loading
Disabled
Destructive (Secondary) Button: Use for when the destructive action is followed by a next step or confirmation modal.
Default
Focused
Hover
Active/Pressed
Loading
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
Focused
Hover
Active/Pressed
Loading
Disabled
Icon variations
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
Do
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
Don't
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.
Button content should generally follow the structure ‘{{Action}} {{Item}}’, with the exception of the index button triggers, which use the ‘New {{Item}}’ and are paired with a plus icon.
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