Skip to content

Overview

Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.

List

Each component has been designed and coded to solve a specific UI problem, such as presenting a list of options, enabling submission of a form, providing feedback to the user, and so on.

ComponentDescription
AlertsType of notification that displays important information and may provide optional related actions.
BannersDisplay a prominent message and related optional actions.
ButtonsAllow users to take actions, and make choices, with a single tap.
CardsCreate boundaries and contain content and actions about a single subject.
CheckboxesAllow users to select one or more items from a set.
ChipsCompact elements that represent an input, attribute, or action.
Date pickersAllow users to select a single instance or range of dates.
DialogsInform users about a task and can contain critical information, require decisions, or involve multiple tasks.
File uploadersAllow users to upload their own files.
MenusDisplay a list of choices on temporary surfaces.
PaginationCommonly used for things like table listings, search results, and directories.
ProgressExpress an unspecified wait time or display the length of a process.
SnackbarsType of notification that provide brief messages at the bottom of the screen.
SteppersConvey progress through logical and numbered steps.
SwitchesToggle the state of a single item on or off.
TablesDisplay information in a grid-like format of rows and columns.
TabsOrganize related content across different screens, data sets, and other interactions.
Text fieldsInputs that enable users to enter free-form text data.
TooltipsDisplay informative text when users hover over, focus on, or tap an element.
WYSIWYGType of editing software that allows easy editing of content.