📄️ Accordion
Groups related long content into sections shown one at a time.
📄️ Alert
Breaks the main user flow to present information.
📄️ Avatar
An avatar represents a unique entity, like a person or group.
📄️ Badge
Presents users with short, relevant information. Often this information should be important & distinguished from the rest of the display.
📄️ Breadcrumb
The breadcrumb is a navigational aid that provides users with a way to understand their location the application, and navigate to higher levels. It typically appears near the top of a page or section.
📄️ Button Link
Displays a single, less important action a user can take.
📄️ Split Button
Allows an interaction focal point for multiple actions a user can take. A split button is a dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.
📄️ Button
Allows a interaction focal point for an action a user can take. Users can do things with buttons. Take a next step. Confirm actions. They are styled links to attract users and drive them in a specific action.
📄️ Checkbox
Enables users to pick multiple options from a group.
📄️ Context Menu
Context menu allows for access to multiple controls from a single trigger, saving screen real estate and reducing visual complexty, particularly in repeating instances such as table rows.
📄️ Date Picker
Enables a user to pick a single date. Supports both choosing from a calendar and typing in a numerical date.
📄️ Date Range Picker
Enables a user to pick a period of consecutive days. Supports both choosing from a calendar and typing in numerical dates.
📄️ Donut
The donut chart is a circular chart with a hole in the centre, used to display data as a proportion of a whole. The content in the middle of the chart can provide additional context that makes it easier to understand the data.
📄️ Duration Picker
Enables a user to pick a duration for something (e.g. a shift, an absence) in hours and minutes.
📄️ Employee Picker (Teams)
Enables one or multiple employees to be selected, usually to be associated with something else (e.g. a rota, a team).
📄️ File Selector
The file selector enables users to upload one or more files from their device.
📄️ Icon
Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help users more easily understand where they are in the product, and common interaction patterns that are available.
📄️ Input Field
Offers users a simple input for a form.
📄️ Input File
Offers users a simple input for a single file upload.
📄️ Modal
A modal is used to reveal critical information, show information without losing context, or when the system requires a user response.
📄️ Nav bar
The nav bar enables us to provide application-level navigation on web. It persists across all pages on applications where it is used.
📄️ Paginator
Use pagination to let users move through an ordered collection of items that has been split into pages. The paginator uses buttons for previous, next, and specific pages, to move back and forth between pages.
📄️ Radio Block
Enables users to pick exactly one option from a group.
📄️ Radio
Enables users to pick exactly one option from a group.
📄️ Segmented Control
The segmented control is a UI component that allows users to toggle between two or three options, providing a clear and visually distinct representation of the current selection.
📄️ Select
A select (dropdown) lets users choose one option from a set.
📄️ Side Drawer
A side drawer is a versatile UI component that can be used to present a wide range of content in a compact, accessible way.
📄️ Spinner
Used to show indeterminate progress, especially at a sub-page level.
📄️ Stepper
Enables incremental changes of a counter without a direct input.
📄️ Switch
Offers a control to switch a setting on or off.
📄️ Table
Data tables are used to organise and display information from a data set. A data table lets users view details from an entire set of data, and helps them find, compare and analyse items.
📄️ Tabs
Tabs divide content into meaningful, related sections.
📄️ Tag
Offers a label that can optionally be selected and unselected or removed.
📄️ Text area
A text area allows a larger amount of text to be entered and viewed: more than a single line.
📄️ Time Picker
Time Picker is an input field for entering or selecting a specific time.
📄️ Toast
A toast displays a short system message as a result of a user's action.
📄️ Tooltip
A tooltip is used to give more context to a specific element in our product. It is a good way of giving more context and conveying meaning through additional text, without polluting the base page with copy.
📄️ Typeahead
- A typeahead is a type of input which offers a list of specified results as the user interacts with the input. This allows users to quickly find information within a list of options, if they are likely to know (or have an educated idea) pre-search the result they are looking to find.
📄️ Wizard
Nudges users to complete several steps.
📄️ Xingloader
Used to show indeterminate progress, especially at a page level.