Components
Actions
Button
Buttons allow users to take actions that will trigger a response
Icon Button
[DEPRECATED] Icon button is a button without text that allows users to take actions.
Data
Chip
Chip is used to categorise or classify similar items, usually via a textual label with an icon
Data Table
Tables are used to display sets of data that are easy to scan
Form Elements
Checkbox
Checkboxes allow the user to select one or more options in a form
Date Picker
Date Picker is used to select a specific date and time.
Search Input
Search Input allows users to perform in-page content searches
Radio Group
Radio Group allows the user to select one option from an available list
Images & Icons
Layout
Carousel
Carousel is used to display a customisable number of slides of content
Divider
Divider is a vertical or horizontal, thin line that groups content in lists and layouts
Sortable List
Sortable List helps users to reorder the sequence of items
Navigation
Breadcrumbs
Breadcrumbs are a series of links that help understand user’s location in a hierarchy
Menu
Menu displays a list of choices in a dropdown
Pagination
Pagination divides large amounts of data into separate pages
Messaging
Callout
Callouts are used to communicate success, errors, warnings or actionable information
Beacon
Beacon helps spotlight specific areas in the interface
Overlays
Drawer
Drawers contain supplementary content or actions, overlaying content from the right side
Overlay
Overlay can be used to highlight an area of the page
Tooltip
Tooltips display informative text when users hover over an element
Popover Basic
Popover is a temporary overlay window that contains contextual information
Popover Sequential
Popover Sequential is a temporary overlay that contains supplementary content, grouped in several steps
Status Indicators
Badge
Badges highlight the status of a corresponding object
Stepper
Stepper indicates a user’s position in a sequence of defined number of steps
Snackbar
Snackbars provide brief messages or feedback about a process at the bottom of the screen
Progress
Progress represents the state of completion of a task or process
Progress Tracker
The Progress Tracker guides users through multi-step workflows, showing completed, current, and incomplete steps, helping them stay oriented across multiple screens.