Skip to content
GitHub Docs Get started
Documentation

Components

Components

Every dsgn component, by group. Each page has live examples, the markup to copy, the attributes and the tokens it uses.

43 components. Each is one CSS file you can also load alone; the ones marked needs dsgn.js get keyboard support and behaviour from the optional script.

Actions

  • ButtonThe main way to act on a page. One solid button per area for the primary action; subtle and ghost for the rest.

Forms

  • Checkbox, Radio, SwitchNative checkboxes, radios and switches, styled without replacing the input, so keyboard and forms work as usual.
  • ChipCompact filters and tags: toggleable chips for filtering, removable chips for selected values.
  • ComboboxA text field with a filtered list of suggestions, for picking from long lists such as clients or cities.
  • File uploadA drop zone for choosing files by dragging or browsing, with the chosen files listed below.
  • Input, Select, Textarea, FieldText inputs, selects, text areas and native date and time pickers, with a Field wrapper that ties label, hint and error to the control, plus a spam-trap field.
  • Option cardA radio or checkbox with a title and description in a card, for choices that need explaining, such as plans.
  • Search field, Number input, KbdA search input with clear button and shortcut hint, a number input with step buttons, and keyboard key labels.
  • Segmented controlA small set of mutually exclusive options shown side by side: view modes, filters, units.
  • SliderA native range input with a filled track and an optional live value.

Status

  • AlertA message inside the page flow: information, success, warning or error, with an optional action.
  • BadgeA short status or count label next to text.
  • BannerA full-width message at the top of a page or app, for things that affect everything below it.
  • Empty stateWhat to show when a list or view has nothing in it yet, with the next step.
  • Progress, SpinnerShow that something is happening: a bar for known progress, a spinner when the length is unknown.
  • SkeletonPlaceholders in the shape of the content while it loads.
  • ToastA short, temporary confirmation after an action, announced to screen readers.

Content

  • AccordionSections that expand and collapse, built on native details and summary.
  • AvatarA person or organisation shown as a picture or initials, alone or in a group.
  • CardA surface that groups related content and actions, optionally with an image on top or as a link.
  • Description listLabel and value pairs, such as the properties of a record.
  • DividerA line that separates content, horizontally or vertically, with an optional label.
  • FeatureAn icon with a title and a short text, beside or above it, for feature lists and benefits.
  • IconMaterial Symbols Rounded, outline by default and filled for selected states; always one line-height in size.
  • LinkInline and standalone links, always underlined so they do not rely on colour.
  • ListRows of items with optional icon, text, meta and action; rows match table row height.
  • MediaA frame for an image or video with a fixed aspect ratio or a circle; corners follow the radius mode.
  • RatingOne to five stars for a review or a product score, readable without colour and announced to screen readers.
  • Stat tileA key number with its label and change, for dashboards and summaries.
  • TableTabular data with sortable headers, row selection, numeric alignment and a sticky header.
  • TestimonialA customer quote with stars, avatar, name and role, styled as a card, for social proof on landing pages.
  • Text stylesText classes that match the Figma text styles one to one, from display to caption.
  • BreadcrumbsShow where the page sits in the hierarchy and link back up.
  • NavNavigation links, horizontal in a header or vertical in a sidebar.
  • PaginationMove between pages of a long list or table.
  • Skip linkA hidden first link that keyboard users can use to jump past the header to the content.
  • StepperShow progress through a multi-step process.
  • TabsSwitch between views of the same content without leaving the page.

Overlays

  • Dialog, DrawerA modal dialog for focused tasks and confirmations, and a drawer that slides in from the side.
  • MenuA list of actions or options that opens from a button.
  • TooltipA short label for an icon button or a hint, shown on hover and focus.

Layout