Components

The library's parts, from single elements to whole page regions, each built from the ones below it.

Every component is a class (or a few) on native HTML. They are grouped by size, and each tier is built from the ones below it: a card holds headings, text and buttons; a dialog holds a card. The bigger parts arrange the smaller ones and leave their styling to them, so a button looks the same in a card, a dialog or a toolbar.

Components share the same options wherever they make sense: size (--sm, --lg), prominence (--strong, --subtle, --plain), intent (--accent, --danger and the rest) and density (--compact). Each option changes one thing, so they combine freely.

Atoms

Single elements: a button, a field’s input, a heading, an icon. They carry the type, colour and target sizes.

• Avatar and Avatar Group
  Who someone is, as a photo, initials or an icon in a shape.
• Badge, Status, Chip and Kbd
  Small labels chosen by their job, such as a count on something, the state of something, a value someone chose or a key to press.
• Brand
  The product's mark and name, as a Link home.
• Button
  An action on the page, such as saving a Form, opening a Dialog or changing a setting.
• Divider
  A rule between groups of content.
• Form Controls
  The parts people fill in or set, such as text inputs, selects, checkboxes, switches and sliders.
• Icon and Icon Box
  A small glyph that helps people recognise something, on its own or in a frame.
• Link and Block Link
  A way to go somewhere else, in running text or as a row of its own.
• Progress and Meter
  A bar for how far a task has got, or for a measurement within a known range.
• Skeleton
  A placeholder that holds the space of content still loading, so nothing moves when it arrives.
• Skip Link
  A Link that lets keyboard users jump past repeated content to the main content.
• Text and Heading
  The type styles, from a display title to small text, and the List.
• Thumbnail
  A small picture of a thing, such as album art, a product shot or a file preview.

Molecules

A few atoms with a job together: a card, a field with its label and hint, a banner.

• Accordion
  A section of content that opens and closes under a summary that names it.
• Banner
  One message with an intent, in one row, with an optional icon and actions.
• Banner Dock
  Pins a Banner to the edge of the page, for site announcements, maintenance notices and consent bars.
• Batch Actions
  The bar shown while items are selected, with how many, the actions on them and a way to clear the selection.
• Breadcrumb
  The trail of pages above the current one, as a line of links.
• Button Group
  A set of related Buttons laid out together, in a row or a column.
• Card
  A surface with named parts, such as a header, a body and a footer, for one thing a person can read, compare or act on.
• Code Block
  Code to read and copy, under a bar that names the language and holds its controls.
• Combobox
  A text field that filters a list of options, for single select or multi-select with Chips.
• Empty State
  The block shown where content would be when there is none, saying why and what to do next.
• Field, Fieldset and Form
  What goes around form controls, such as labels, hints, errors, groups of choices and the Form's actions.
• Lockup
  A primary line of text with a secondary one under it, such as a name and an email.
• Menu
  A list of actions in rows, usually opened from a Button in a Popover.
• Navigation Tree
  Nested links to the sections of a site or a page, such as a docs Sidebar or a table of contents.
• Pagination
  Links that move between the pages of one List.
• Popover
  A layer anchored to the control that opens it, holding a Card or a Menu.
• Prose
  Styles bare HTML, such as CMS and Markdown output, so it reads like the rest of the library without classes.
• Stepper
  The steps of one task, showing which are done, which is current and which are left.
• Tabs
  A row of Tabs for moving between sections of a site or switching the view of one panel.
• Telemetry
  A labelled value, such as uptime or listeners, built on a description list.
• Toast
  A short message that appears in a corner of the screen, built from a Banner in a live stack.
• Tooltip
  A short line of plain text about a control, shown while the control is hovered or focused.

Organisms

Larger regions: a dialog, a table, the page header.

• Dialog
  A modal window on top of the page, for a decision, a short form or a drawer of settings.
• Footer
  The band at the bottom of a page or app, with site links, legal text and contact details.
• Header
  The band at the top of a page or app, holding the Brand, the main navigation and global actions.
• Sidebar
  A side panel beside the main content, for section navigation, filters or tools.
• Table
  Data in rows and columns, with rules, alignment and sticky edges.

Layout

Rows, columns, grids and the page shell. They place things and set the space between them, and nothing else.

• App Shell
  The page shell that places the Header, main and footer in rows, with side panes beside the main.
• Grid
  Columns that fill the width and reflow on their own, or a row that scrolls and snaps.
• Split
  Two panes side by side, a side pane at its preferred width and a main pane taking the rest.
• Stack, Inline and Cluster
  One-dimensional flows that space their children in a column, a row or a wrapping row.
• Wrapper
  Centres content, caps its width and keeps it off the screen edge.