Design
Each button type has fully rounded corners. This creates a cohesive and consistent visual language within our design system. The differentiation in colour, border, and background helps users to easily distinguish between primary, secondary, and tertiary actions, contributing to a more intuitive and user-friendly interface.
Anatomy
A button consists of a container, a text, and an optional leading or trailing element (icon). The anatomy of a button in our design system includes various visual and functional elements that work together to create a cohesive and user-friendly interface. Here is a breakdown of the key components:
Purpose
Displays the primary action or information associated with the button.
Attributes
Font size, colour, and style are essential for readability and visual hierarchy.
Purpose
Forms the overall shape of the button and contains its elements.
Attributes
Background colour or style, border-radius and dimensions.
Purpose
Defines the outer edge of the button, providing a visual separation from the surrounding elements.
Attributes
Thickness, colour, and style.
Purpose
Provides additional context or visual cues to users before they interact with the button.
Attributes
Size, colour, and alignment within the button.
Purpose
Serves a similar purpose to a leading element but is positioned on the right side of the button.
Attributes
Size, colour, and alignment within the button.
Purpose
Determines the distance between the button's content (text, icon) and its container's edges.
Attributes
Ensure adequate padding for touch targets and visual balance.
Purpose
Communicate the button's current state (e.g. hovered, pressed).
Attributes
Colour changes, subtle animations, or other visual cues.
Purpose
Ensures the button is usable by everyone, including those with disabilities.
Attributes
ARIA attributes, focus styles, and sufficient colour contrast.
Leading and trailing elements
An icon positioned at the beginning is known as a leading element, the one at the end of the text is referred to as a trailing element. Both types of elements share common purposes, offering visual cues and improving the user interface.
Leading element
Use leading elements to support the button text. Some examples could be a trash can icon + text Delete, a search icon + text Search and arrow to bottom icon + text Download.
Trailing element
Use trailing element as an affordance of what will happen when you interact with the button. For example, a button that leads the user forward in a flow, an arrow icon is a good choice.