Skip to content

Components

Specified once, technology-agnostically, with their own DTCG tokens, Markdown guidance and a vanilla CSS reference rendering.

All components

  • Accordion draft

    A stack of sections whose content shows and hides under a header people activate.

    role disclosure v0.1.0 6 parts 2 properties 5 states

  • Alert draft

    A brief, important message that draws attention without interrupting the task.

    role alert v0.1.0 5 parts 3 properties 1 states

  • Avatar draft

    Represents a person or an entity with a picture, or their initials when there is none.

    role presentation v0.1.0 3 parts 5 properties 1 states

  • Badge draft

    A short piece of text that qualifies the item next to it: a status, a count, a category.

    role presentation v0.1.0 2 parts 4 properties 1 states

  • Breadcrumb draft

    Shows where the current page sits in a hierarchy, with a link to each level above it.

    role navigation v0.1.0 5 parts 3 properties 4 states

  • Button draft

    Triggers an action or event when activated.

    role button v0.22.1 3 parts 7 properties 5 states

  • Card draft

    A surface that groups a title and related content as one unit.

    role container v0.1.0 3 parts 4 properties 1 states

  • Checkbox draft

    Lets people turn one option on or off, or pick any number of options from a list.

    role checkbox v0.1.0 4 parts 7 properties 7 states

  • Checkbox group draft

    Lets people pick any number of options from a short, visible set, under one legend.

    role group v0.1.0 8 parts 10 properties 6 states

  • Divider draft

    A thin line that separates two groups of content.

    role presentation v0.1.0 1 parts 1 properties 1 states

  • Dropdown draft

    A button that opens a menu of related actions.

    role disclosure v0.4.1 9 parts 7 properties 6 states

  • Icon draft

    A glyph of the system's icon set, decorative or named.

    role presentation v0.1.0 1 parts 4 properties 1 states

  • Icon button draft

    Triggers an action with an icon alone; its label is given to assistive technology.

    role button v0.5.1 2 parts 6 properties 5 states

  • Number field draft

    Lets people enter a number, by typing it or stepping it up and down.

    role spinbutton v0.1.0 5 parts 13 properties 6 states

  • Pagination draft

    Lets people move between the pages of a long list, with the current page marked.

    role navigation v0.1.0 7 parts 5 properties 6 states

  • Progress bar draft

    Shows how far a task has progressed, or that it is in progress when its length is unknown.

    role progressbar v0.1.0 5 parts 5 properties 2 states

  • Radio group draft

    Lets people choose exactly one option from a short, visible set.

    role group v0.1.0 8 parts 10 properties 6 states

  • Search field draft

    Lets people type what they are looking for.

    role searchbox v0.1.0 6 parts 7 properties 4 states

  • Select draft

    Lets people choose one option from a list that opens on demand.

    role combobox v0.1.0 8 parts 9 properties 5 states

  • Skeleton draft

    A placeholder shape that stands in for content while it loads.

    role presentation v0.1.0 1 parts 3 properties 1 states

  • Slider draft

    Lets people pick a value in a range by moving a thumb along a track.

    role slider v0.1.0 5 parts 8 properties 5 states

  • Spinner draft

    Says that something is loading when its length is unknown, as a turning ring with a label.

    role status v0.1.0 3 parts 3 properties 1 states

  • Switch draft

    Turns a setting on or off, with immediate effect.

    role switch v0.1.0 5 parts 5 properties 5 states

  • Text field draft

    Lets people enter or edit a single line of text.

    role textbox v0.1.0 5 parts 10 properties 6 states

  • Textarea draft

    Lets people enter or edit several lines of text.

    role textarea v0.1.0 5 parts 11 properties 6 states