Figma component
Healthy
Show details
Overview
Key features
- Emphasis Levels: Available in high, medium, low, and lower emphasis.
- Size Options: Available in multiple sizes to adapt to different layouts and touch targets.
- Shape Options: Offers two shapes – circular and square.
- Accessibility: Fully keyboard navigable and screen-reader accessible.
Anatomy
- Icon: Visual representation of the action.
- Container: Shows shape and size.
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
Shape
Best Practice
Do
- Use icon buttons for quick, recognisable actions without requiring a label
- Choose universally understood icons to reduce ambiguity
Do
Provide accessible labels for screen readers and tooltips
Do
Use emphasis and placement to signal importance or frequency of use
Don't
Avoid using unfamiliar or ambiguous icons without tooltips
Don't
- Don’t overload interfaces with too many icon buttons in close proximity
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.