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

Sizes

 

 

Variants

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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