1. What does the component do?
- It triggers an action on a page.
2. When should the component be used?
- When starting or ending a process.
- When sending a form.
- When selecting a function on a page.
- Cannot be used within body copy.
- Cannot be used in the header as navigation or a function.
- The minimum width is 60px.
- The width increases with the text length. The width is 100% for mobile views.
- If the text is still too long when the maximum length is reached, it is shortened with “...”.
- The text is always single-line.
- Buttons are right-aligned in the viewport. The primary button is positioned to the left of the secondary button.
4. Variants and statuses
The component has the following statuses:
4.1 Primary button
4.2 Alternative primary button
4.3 Secondary Button
4.4 Ghost Button
4.5 Icon Button
When hovering over an icon button, a tooltip should be used to make the underlying action clearer.