Share
Explore
Design system template with Figma
Components
Track all of your components and open up the documentation when you click on each of these card. Any design system task that is related to any of these components will show up at the very bottom of the documentation which helps to serve as both a change log as well as to keep everyone informed of upcoming work.
Clear rows in component table
Components
Component type
Search
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
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
Button
A button triggers an action or event when activated.
Figma link
Storybook
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
Input field
Input allows the user to enter and edit text.
Figma link
Storybook
Menu
A menu list displays a list of actions. It is usually rendered inside of the Menu component.
Figma link
Storybook
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
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
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
Popover
A popover displays content on top of other content.
Figma link
Storybook
System icons
Figma link
Storybook
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.