Components
Every component, documented from its Figma component set: atoms first, then the molecules and organisms built from them.
Atoms
Avatar
Represents a person with a photo, their initials or a fallback icon. Four sizes, circle or square, with an optional stroke.
Badge
Short status label with an optional icon. Six statuses: Brand, Default, Error, Warning, Success and Info.
Button
Primary interface action. Five variants (Brand, Ghost, Subtle, Outline, Danger), two sizes and five states.
Checkbox
Selection control with three values (Unchecked, Checked, Indeterminate), two sizes and five states. Includes a label and optional supporting text.
Input
Single-line text field with a label, optional icons and helper text. Two sizes; Error shows the helper text as the error message.
ProgressBar
Shows how far a task has progressed. Four colors and two sizes, with an optional label and value.
RadioButton
Single choice within a group. Two values (Unselected, Selected), two sizes and five states. Includes a label and optional supporting text.
Separator
Divides content horizontally or vertically. Default or Brand color; the horizontal one can carry a label.
Slider
Picks a number in a range by dragging a thumb or with the arrow keys. Two sizes and five states, with a label and the current value.
Switch
On/off control that applies immediately. Two values (Off, On), two sizes and five states. Includes a label and optional supporting text.
TextArea
Multi-line text field with a label and helper text. Resizes vertically; Error shows the helper text as the error message.
TextLink
Inline navigation. Underlined or not, default or muted, with optional leading/trailing icons.
Molecules
Breadcrumb
Shows where the current page sits in the site hierarchy: links to each parent level, then the current page.
ButtonGroup
Related actions joined in one control: Buttons side by side, divided by Separators except on Brand.
Combobox
A text field that suggests matching options as you type. Label, optional helper text, and an error state.
DropdownMenu
A button that opens a list of actions. The list closes when an action is chosen, on Escape or outside clicks.
ListItem
One row of a list: a leading icon or avatar, a title with an optional description, and a trailing caret button, switch, button or text.
Pagination
Moves between pages of results: previous/next arrows, the first and last page, the pages around the current one, and an ellipsis for the gaps.
SegmentedControl
Picks one of a few related options in place (e.g. a view or a filter). Figma designs three segments in two sizes.
Select
Picks one option from a list that opens under the field. Label, optional helper text, and an error state.
Tooltip
A short label shown next to an element on hover or keyboard focus. Four positions, two variants, optional arrow.
Organisms
Calendar
Picks a date, or a range of dates, from a month grid. Moves between months with its buttons or the keyboard.
Card
A surface that groups content about one subject: optional media with a badge, then a slot for content (by default, Card Content).
CommandMenu
Search and quick actions: a search field that filters a list of commands, grouped under headings. In the page, or as a modal dialog opened from a trigger.
Dialog
Asks for a decision or shows focused content on top of the page: a title, a description, optional content, then the actions. Destructive marks an action that cannot be undone.
Drawer
A panel that slides in from the side of the screen for a task or details, without leaving the page: a title, a description, content, then the actions.
EmptyState
Explains why there is nothing to show (no results, an empty folder, a caught-up inbox, no access) and offers what to do next.
Footer
The end of a page: the brand, the site’s links and the legal notes. Newsletter adds a subscribe band above.
NavigationBar
The bar at the top of a site: the logo, the main links and the account actions. On small screens the links move into a menu.
Sidebar
The navigation at the side of an app: the workspace, the main links, settings and the user. It can collapse to icons.
Skeleton
Placeholder shapes shown while content loads: a text line, a rectangle, a circle, or a ready-made layout (text, avatar with copy, card, form, table). They pulse gently.
Table
Shows records in rows and columns, with a summary below. In Single selection, people pick one row.
Tabs
Switches between views of related content: a bar of tabs, and the panel of the selected one.
Toaster
Shows Toasts in the bottom-right corner of the screen: newest nearest the edge, at most three, hiding on their own after 5 seconds (Danger stays).