Components

Button

Triggers a single action or navigation event.

Button Group

Displays two or more related buttons as a cohesive unit.

Close Button

A small dismissal button displaying an × icon.

Icon Button

A compact button that displays a single icon with no text label.

Split Button

A button combining a primary action with a dropdown for secondary options.

Sticky Button

A button that remains fixed in the viewport as the user scrolls.

Toggle Button

A button that switches between two states such as active and inactive.

Toggle View

A button that switches between two views, such as list and thumbnail.

Tooltip Button

A small circular icon button that triggers a tooltip with contextual help text.

Checkbox

A small box that users can tick or untick to select or deselect an option.

Colour Picker

Allows users to select or specify a colour via a visual picker or hex input.

Date and Time Picker

Allows users to select a date, time, or combined date-time value.

Dropdown

Allows users to select a single option from a collapsed list.

File Upload

Enables users to attach one or more files from their device.

Form Control

A wrapper that provides consistent label, helper text, and error messaging.

Matrix

A survey question type presenting multiple statements with shared response options.

Multi-Select

Allows users to select multiple options from a searchable dropdown list.

Radio Button

Allows selection of exactly one option from a set of mutually exclusive choices.

Range Slider

Allows users to select a numeric value or range by dragging a handle.

Ranking

Allows users to order a list of items by preference or priority via drag interaction.

Rich Text Editor

A WYSIWYG editor supporting text formatting.

Search

A text input that lets users search or filter content.

Selector

Allows users to choose from options presented as selectable cards or tiles.

Switch

A toggle control for enabling or disabling a binary setting with immediate effect.

Text Area

A multi-line text input for capturing longer freeform content.

Accordion

Groups related content into collapsible sections to reduce visual complexity.

Alert

Displays a contextual feedback message in response to a user action or system event.

Avatar

Displays a user's profile image, initials, or a fallback icon.

Badge

A small label used to display statuses or short metadata values on UI elements.

Badge Priority

A small label with a leading icon used to indicate urgency or priority level.

Containers

Structural layout components used to group and space related content.

Data Display

Renders structured or aggregated data in a formatted, readable layout.

Loading Status

Indicates that content or a process is in a loading or pending state.

Modal

A dialog overlay that focuses user attention on a task or decision.

Notification Modal

A modal variant used to surface system-level notifications.

Pagination

Allows users to navigate through large data sets split across multiple pages.

Pill

A small label used to display a count or numeric value.

Placeholders

Empty state components displayed when no content is available in a view.

Progress Stepper

Displays a user's current position within a multi-step process.

Sentiment

Captures a qualitative user response using icons or scale indicators.

Spinner

Indicates that a process is loading or in progress.

Stepper

A stepped navigation component used to guide users through a sequential process.

Surfaces

The background/elevation treatment everything else in the system sits on top of.

Table

Displays structured data in rows and columns with support for sorting and pagination.

Tabs

Organises related content into selectable panels within a single view.

Tag

A compact label representing a metadata value, category, or filter.

Tag Group

A container for displaying and managing multiple tags together.

Tooltip

Displays brief contextual information on hover or focus of a UI element.