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