Buttons
Button Button
Triggers a single action or navigation event.
Button Group Button Group
Displays two or more related buttons as a cohesive unit.
Close Button Close Button
A small dismissal button displaying an × icon.
Icon Button Icon Button
A compact button that displays a single icon with no text label.
Split Button Split Button
A button combining a primary action with a dropdown for secondary options.
Sticky Button Sticky Button
A button that remains fixed in the viewport as the user scrolls.
Toggle Button Toggle Button
A button that switches between two states such as active and inactive.
Toggle View Toggle View
A button that switches between two views, such as list and thumbnail.
Tooltip Button Tooltip Button
A small circular icon button that triggers a tooltip with contextual help text.
Forms & inputs
Checkbox Checkbox
A small box that users can tick or untick to select or deselect an option.
Colour Picker Colour Picker
Allows users to select or specify a colour via a visual picker or hex input.
Combobox Combobox
A text field that filters a list of options as the user types and lets them pick one.
Date and Time Picker Date and Time Picker
Allows users to select a date, time, or combined date-time value.
Dropdown Dropdown
Allows users to select a single option from a collapsed list.
File Upload File Upload
Enables users to attach one or more files from their device.
Form Control Form Control
A wrapper that provides consistent label, helper text, and error messaging.
Matrix Matrix
A survey question type presenting multiple statements with shared response options.
Multi-Select Multi-Select
Allows users to select multiple options from a searchable dropdown list.
Radio Button Radio Button
Allows selection of exactly one option from a set of mutually exclusive choices.
Range Slider Range Slider
Allows users to select a numeric value or range by dragging a handle.
Ranking Ranking
Allows users to order a list of items by preference or priority via drag interaction.
Rich Text Editor Rich Text Editor
A WYSIWYG editor supporting text formatting.
Search Search
A text input that lets users search or filter content.
Selector Selector
Allows users to choose from options presented as selectable cards or tiles.
Switch Switch
A toggle control for enabling or disabling a binary setting with immediate effect.
Text Area Text Area
A multi-line text input for capturing longer freeform content.
Components
Accordion Accordion
Groups related content into collapsible sections to reduce visual complexity.
Alert Alert
Displays a contextual feedback message in response to a user action or system event.
Avatar Avatar
Displays a user's profile image, initials, or a fallback icon.
Badge Badge
A small label used to display statuses or short metadata values on UI elements.
Card Card
A bordered container that groups related content, media, and actions into a self-contained unit.
Containers Containers
Structural layout components used to group and space related content.
Data Display Data Display
Renders structured or aggregated data in a formatted, readable layout.
Loading Status Loading Status
Indicates that content or a process is in a loading or pending state.
Modal Modal
A dialog overlay that focuses user attention on a task or decision.
Notification Modal Notification Modal
A modal variant used to surface system-level notifications.
Pagination Pagination
Allows users to navigate through large data sets split across multiple pages.
Pill Pill
A small label used to display a count or numeric value.
Placeholders Placeholders
Empty state components displayed when no content is available in a view.
Popover Popover
A floating panel anchored to a trigger that holds richer content than a tooltip.
Progress Stepper Progress Stepper
Displays a user's current position within a multi-step process.
Sentiment Sentiment
Captures a qualitative user response using icons or scale indicators.
Spinner Spinner
Indicates that a process is loading or in progress.
Stepper Stepper
A stepped navigation component used to guide users through a sequential process.
Surfaces Surfaces
The background/elevation treatment everything else in the system sits on top of.
Table Table
Displays structured data in rows and columns with support for sorting and pagination.
Tabs Tabs
Organises related content into selectable panels within a single view.
Tag Tag
A compact label representing a metadata value, category, or filter.
Tag Group Tag Group
A container for displaying and managing multiple tags together.
Tooltip Tooltip
Displays brief contextual information on hover or focus of a UI element.
