Share
Explore
Components
Our components
Component type
Search
Component
Preview image
Description
Figma component
Storybook
1
Dialog
is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.
Figma link
Storybook
2
Dropdown
A Dropdown is a selection component composed of a button and a list of options. The button displays the current selected item or a placeholder, and the list is visible on demand by clicking the button. Dropdowns are typically used in forms.
Figma link
Storybook
3
Button
A button triggers an action or event when activated.
Figma link
Storybook
4
Checkbox
Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked).
Figma link
Storybook
5
Input field
Input allows the user to enter and edit text.
Figma link
Storybook
6
Menu
A menu list displays a list of actions. It is usually rendered inside of the Menu component.
Figma link
Storybook
7
Message bar
Communicates important information about the state of the entire application or surface. For example, the status of a page, panel, dialog or card. The information shouldn't require someone to take immediate action, but should persist until the user performs one of the required actions.
Figma link
Storybook
8
Radio
Radio lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space. For more than 5 choices, consider using a different component such as Dropdown.
Figma link
Storybook
9
Avatars
An AvatarGroup is a graphical representation of multiple people associated with a given entity. AvatarGroup leverages the Avatar component, with each Avatar representing a person and containing their image, initials, or an icon. An AvatarGroup can be represented in a spread, stack, or pie layout.
Figma link
Storybook
10
Popover
A popover displays content on top of other content.
Figma link
Storybook
11
System icons
Figma link
Storybook
12
Figma link
Storybook
There are no rows in this table
Table that this table is a view of has been deleted. Click to delete the table.
Table
Name
Column 2
Column 3
Notes
1
Open
2
Open
3
Open
There are no rows in this table
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.