Actions
Button
Use button to communicate an instantaneous action. Do not use for navigational actions that appear within or directly following a sentence, use the Link component instead.
File Upload
Upload photos or documents directly into the software
Communication
Alert
Content that delivers an important messages to the user. This temporary message can be resolved by the user.
Avatar
Use to represent a user or a brand (with a logo or branded graphic). When the user did not upload any picture yet, avatar should present user’s initials in Grape on Lilac background, details are provided below.
Badge
Small UI item which indicates a status, notification, or event that appears in relativity with the object it refers to. Think notification or message count; it’s not interactive and used to highlight information.
Empty State
Empty states are shown when there is no data and typically describes what someone can do next. They’re also commonly referred to as zero states.
Pill
Pills are non-actionable small text-based elements to emphasize information.
Stepper
Displays a linear process or workflow in a step-by-step manner, allowing the user to easily understand where they are in the process and what steps remain. AKA progress indicator.
Toast
Toasts display brief, temporary notifications that are non critical, as it may happen that they aren’t read. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.
Tooltip
Containment
Card
A card is a container for a few short, related pieces of information. Put simply: it is a fancy hyperlink.
List
A vertical display of multiple items with similar content.
Navigation
Link
Use primarily for internal and external navigation, mostly within or directly following a sentence. Never use as an instantaneous action, it is not equivalent to tertiary button (using it so will decrease accessibility).
Tab
Tabs allow navigation between groups of related content at the same level of hierarchy.
Selection
Checkbox
Use in multi-select scenarios when selecting one doesn’t affect any other and when checked = true, unchecked = false.
Chip
Chips are an interactive selection component.
Date Picker & Range
Use to allow a user to choose a date or range of dates.
Menu / Dropdown
A form field that allows the selection of one or more items from a predefined list of options.
Radio Button
Allows the selection of one option from a list of related choices.
Segmented Control
A segmented control is a group of 2-4 options that lets the user switch views or sort elements.
Select
A form field that allows the selection of one or more items from a predefined list of options.
Selection Card
Selection cards are an alternate style variation for checkboxes, radio buttons and links.
Toggle Switch
A toggle is a digital “on/off” switch. They are best used for changing the state of system functionalities and preferences.
Weekday Picker
Allows the user to pick a single or multiple days from a week.