Design System - Button

Buttons are used for initiating actions.

Anatomy

1. Leading icon (optional)

2. Text

3. Notification badge (optional)

4. Trailing icon (optional)

Types

1. Primary

2. Secondary

3. Tertiary

Size

1. Small

2. Medium

3. Large

States

1. Default

2. Hover

3. Pressed

4. Disabled

5. Loading

6. Focused

Usage

Primary

The primary button should be used for high-priority actions, guiding users toward the most common or important option.

Secondary

The secondary button is intended for medium-priority actions and is typically the most frequently used button type.

Tertiary

The tertiary button is designed for low-priority actions and is often used alongside higher-priority buttons. Be cautious when using tertiary buttons on their own, as their low emphasis can make them easily overlooked.

Button hierarchy

Ensure the buttons establish a clear and appropriate hierarchy, with each button drawing the intended level of attention.

Icons

Typically, the leading icon should be used to convey the meaning of the action. The trailing icon should be used to indicate what type of event happens when you click the button, for example that it will open up a new tab.

Button grouping

Use the secondary button when there are several actions with equal priority. Don’t group several primary buttons. When buttons are left-aligned, the highest-priority button should be positioned on the far left. When buttons are right-aligned, the highest-priority button should be positioned on the far right. When the buttons are stacked vertically, the button with the highest priority should be on top.

UX writing

Use text that describes the outcome or destination as clear as possible. Always use a verb. Avoid vague or generic text. Never mislead users. Use short and concise text, ideally 1-3 words.Avoid overcomplicating the button text. Don’t use any punctuation. Use sentence case for button text. Don't apply other capitalization styles. Display the button text on a single line. Don't wrap the button text. Avoid truncating it.

Contact

Email: pierre@bremell.com
Phone: +46 709353902
LinkedIn: bremell

© Pierre Bremell
Experience Designer