Reusable parts with sizes, states and usage rules. Each component has a specification skill; the pages are grouped by family.
What the user presses to do something. Used everywhere: in forms, notifications, modals and banners.
Primary, secondary, blank, destructive, accent and system buttons, with icon buttons. Four sizes and four states, with an interactive playground.
Joined System buttons for choosing between two and four short options on one row.
Controls the user fills in or sets. They share states, sizes and the same page layout.
Choose any number of options. Light and dark mode, all states, with an interactive playground.
Enter free text, numbers or search terms. Sizes, seven states, icons and messages, with an interactive playground.
Enter text over several lines, with an optional word count. Seven states and a resizer, with an interactive playground.
Choose exactly one of two or more options. Large and small, all eight states, with an interactive playground.
Choose one option from a list. Sizes, seven states and messages, with an interactive playground.
Turn one setting on or off with immediate effect. Three sizes, light and dark mode, all states.
Switch between content at the same level, or navigate between pages. Primary and secondary, three sizes, icons and status.
Switch between two to four related views with a sliding pill. Four sizes.
Pick one value from an ordered series by dragging a thumb. Named steps or numeric.
A field for a Material Symbols name, with instant search over every icon.
Tell the user that something changed. Five components from a short-lived toast to a blocking modal; start with the guide to choose.
Which of the five notification components to use, with a chooser, status colors and icons, and live demos of each.
Short-lived feedback on a user action. Trigger real toasts, in four statuses and two emphasis levels.
Confirm add to cart or wishlist without leaving the page. Try it on a product card.
Block the page until the user decides. Three sizes; try ESC, overlay click and focus return.
Page-wide and system messages. Small, Large and Promotion, with placement and priority rules.
Feedback next to the work, until the user acts. See it react in a form.
Surfaces and separators that organise content.
The list surface of a dropdown and an exposed dropdown (Select). Two sizes, three dividers, single and multi select.
The content of one row in a menu or picker: leading, label, trailing, with optional overline and supporting text.
Separate content groups with a 1px line. Horizontal and vertical, three colors, with an interactive playground.
Take the user somewhere. Start with the guide to choose between the three types.
Which link type to use: inline, action or tile. A decision table and the three types side by side.
A link inside a sentence. Underlined when enabled, never with an icon.
A standalone link with an optional left icon and a right chevron.
A graphical, prominent link as a card: brand logo, icon with label, or label only.
Small parts that show where you are, what state something is in, or how to get more.
A read-only status, label or count. Five types: Basic, Dot, Number, Product & Discount, Purchase Info.
Shows where the page sits in the site, with a bordered box for every step.
A load-more pattern with a counter, a progress bar and a button.
A short name for an icon-only button, shown on hover and never on keyboard focus.
Blocks that structure a page and present content.
A full-width page block with padding that steps at the five breakpoints, plus the page divider.
A row that opens and closes to show more content, for FAQ lists and filters. Two sizes, boxed and dark.
Pages that are not part of the official collection yet: a test built on the comparison pages. It has three pages like the other components, but no Figma component exists.
Composed solutions built from several components. Read how a pattern differs from a component. Breadcrumb Bar is live; the others are coming.
The trail at the top of a page: two to six crumbs with a slash between them, built from Breadcrumb Base.
A full-width banner at the top of a page.
A carousel of splash cards.
Patterns that belong to these documentation pages only. They are not components for the product.
Widgets in the Storyblok admin tool. Each page shows how an editor sets up the widget and how its settings map to the component.