i

Component gallery

draft · 74 components

The same component, as 7 design systems really draw it. Each one is the system’s own package, live, with what it calls the thing and how it is built beside it.

The exhibit One page, every system. A delivery form with identical words and fields, drawn by each design system. Flip the toggle and everything but the content changes. open the exhibit →

The groups

9
5 components

Doing

Controls that make something happen the moment they are used.

Button · Button group · Menu button · Bulk actions · Floating action button 10 components

Choosing

Controls that record a decision among options that are already on the table: on or off, one of few, one of many, a point on a range.

Select · Checkbox · Radio button · Checkbox group · Slider · Toggle · Content switcher · Radio button group · Filters · Selectable tag 10 components

Entering

Controls where the person supplies the value rather than picking it: typed, completed, dated, uploaded.

Text input · Autocomplete · File uploader · Search · Date picker · Number input · Password input · Time picker · Color picker · Input group 6 components

Forms

The structure around fields: the form itself, the field, its label and hint, and what it says when something is wrong.

Form · Form field · Error message · Fieldset · Form label · Helper text 6 components

Interrupting and annotating

Layers and messages that appear over or beside the page: some demand an answer, some only explain, some only report.

Modal · Inline notification · Tooltip · Popover · Toast notification · Side panel 11 components

Organising content

Structures that decide how much of a page is visible at once, and how its parts relate.

Tabs · Card · Item list · Accordion · Data table · Divider · Disclosure · Table · Tree view · Description list · List 10 components

Navigating

Ways to get from here to somewhere else, and to know where here is.

Breadcrumb · Pagination · Header · Link · Side navigation · Menu · Navigation bar · Footer · Page header · Skip to content 11 components

Showing state and identity

Small signs that say how far something has got, what state it is in, what it is called, or whose it is.

Tag · Badge · Progress bar · Empty state · Avatar · Dismissible tag · Spinner · Step indicator · Tag group · Avatar group · Skeleton 5 components

Content

The words, pictures and symbols a page is made of.

Heading · Icon · Paragraph · Image · Keyboard key

Behind it: who ships what · how it was made and read · credits and licences