Button
1. What does the element do?
- It triggers an action.
2. When should the element be used?
- When starting or ending a process.
- When sending a form.
- When selecting a function.
3. Rules
- It cannot be used within body copy.
- The text is always single-line.
- Only one primary button can be used per page/dialogue.
- Several secondary buttons are permitted per page/dialogue.
- Secondary and tertiary buttons can only be used if a primary button already exists.
4. Variants and statuses
The element has the following statuses:
- Normal
- Pressed
- Disabled
- Loading
4.1. Primary
- Full width of the screen or modal dialogue (minus spacing).
4.2. Secondary
- Full width of the screen or modal dialogue (minus spacing).
4.3. Tertiary
4.3.1. Label and icon
4.3.2. Label
4.3.3. Icon
4.4. Tertiary small
4.4.1. Label and icon
4.4.2. Label
4.4.3. Icon
