Button
A fundamental UI element used to trigger actions or events. It ensures consistency, accessibility, and a clear call to action.
Type
- Primary
- Secondary
- Secondary Colour
- Tertiary
- Tertiary Colour
- Danger Primary
- Danger Secondary
- Danger Tertiary
Size
Each button size is designed to cater to different form or action needs, ensuring optimal readability and user experience.
Appearance state
- Default: An element appears when it is not being interacted with. It’s the initial appearance of the element.
- Hover: An element appears when a user moves the mouse pointer over it. This state provides a visual feedback to indicate that the element is interactive.
- Focused: An element appears when it is selected or active, usually through keyboard navigation (TAB) or a mouse click. This state is crucial for accessibility, helping users identify the currently active element.
- Disabled: An element appears when it is not available for interaction. This state is used to prevent users from interacting with elements that are not currently active or available.
Leading & Trailing icon
- Leading icon: Placed before the text inside a button. It visually enhances the button by indicating the action's purpose at a glance. E.g. Download icon, Arrow backward icon, Thrash icon, cross icon
- Trailing icon: Placed after the text inside a button. It complements the text and often indicates further action or direction. E.g. Arrow forward icon
Counter
A counter in a button component is a small numeric indicator displayed within a button.
It provides a visual representation of a count related to the button's function, such as the number of selected filters, notifications, or items in a cart.
Icon only
The primary visual element of the button is an icon that clearly indicates the action or function without text.
E.g. Plus icon, Pencil icon, Hamburger icon, Trash icon
Demo
Take note of how button moves down by 0.5 pixels when clicked.