Figma component
Healthy
Show details
Overview
Key features
- Emphasis Levels: Available in high, medium, low, lower and danger emphasis.
- Danger Mode: Used for destructive actions such as delete or disable, where the outcome cannot be undone
- Sizes: Available in multiple sizes to adapt to different layouts and touch targets.
- Icons: Supports both leading and trailing icons
- Customisable with Slots: Allows custom content in both leading and trailing icons.
- Accessibility: Fully keyboard navigable and screen-reader accessible.
Anatomy
- Leading Icon: Optional icon placed before the label to visually reinforce the action.
- Label: The main text that describes the button’s action.
- Trailing Icon: Optional icon placed after the label to indicate direction or outcome.
Look and feel
States
States define how the component behaves and appears in different interactions:
- Default: The standard appearance when inactive
- Hover: Highlights the field when the user hovers over it
- Focus: Indicates active input with a visible focus indicator.
- Active: Visually represents the moment of user activation - click or tap.
- Disabled: Prevents interaction and input, appearing visually subdued.
- Read-only: Displays content without allowing edits while maintaining a standard appearance.
Emphasis
Supports four emphasis levels – high, medium, low, and lower – to adapt visual hierarchy based on context. Each level adjusts background, border, and icon color to reflect priority
Sizes
Loading
Action may not always be immediate: data requires loading, and the system must perform calculations. To keep users informed and discourage unnecessary clicking, a disabled button appears when the loading state is toggled on.
Danger
Danger mode alerts users that the action they are about to take cannot be undone. It should be used for actions such as deleting, disabling, and other irreversible tasks.
Best Practice
Do
Use button emphasis to create hierarchy in your screens
Don't
Avoid using high emphasis button next to each other
Do
Choose icons that complements the label
Content
Use strong, action-oriented verbs. Keep text short and clear.
Do
Don't
Guidelines
- Start with action verbs (Save, Delete, Download, Submit)
- Maximum 3 words
- No periods
- No "please" or "click here"
- Be specific about the action
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.