Skip to main content

Components #

This page shows a list of all code based components. When components are added or deprecated, their their status is updated here so that it’s clear what’s available for use.

For getting started instructions, see Using Components. If you have a suggestion for a new component not listed here, let us know on Slack. For designers, we also have a list of existing Sketch components.

Alert

Informs user about important changes or conditions in the interface. Use this component if you need to capture user’s attention in a prominent way.

Badge
New

Badges are used to inform users of the status of an object or of an action that’s been taken.

Button

Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.

Caption
New

Captions are used as brief explanations accompanying an illustration, form element, or similar. Caption text is smaller than the recommended size for general reading.

Card

Cards are shadowed surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

Checkbox

Checkboxes are used to let a user choose one or more options from a limited number of options.

Choice
New

Choice buttons allow selection of a single or multiple options from a set of predefined options. They are a good alternative to radio buttons, checkboxes, and select menus.

Choice Group
New

Choice group allows user to select one choice from a set of choices. Use value on group to set the selected choice. For more usage examples, please see Choice component.

Collapsible
New

Collapsible is a disclosure component used to reveal additional content. It should contain a heading, followed by any additional content that is revealed on click.

Definition List
Deprecated

Definition Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.

Divider

Dividers are used to represent thematic breaks between paragraph-level elements. Visually, they look like horizontal rules or lines.

Footer

Footer component is used as the global footer for all views. Contains copyright data and links to related documents.

Grid
New

Grid component provides structure for other components using Flexbox based layout system. Grid allows nesting and defining the direction of the content.

Grid Item
New

Grid Item is a component used inside the Grid that makes it possible set additional parameters for items. For concrete usage examples, please see Grid component.

Header

Header is used to display the logo, primary navigation and utility menus. It’s always visible at the top of the interface and can be configured to show just the logo and a back link.

Heading

Headings are used as the titles of each major section of a page in the interface. For example, templates generally use headings as their title.

Hero Area

When placed at the top of the page hero areas are often the first thing user sees, making them a great place to catch user’s attention with catchy content.

Icon
New

Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to customize the size and color of the icon.

Input

Inputs are used to allow users to provide text input when the expected input is short. Input component has a range of options and supports several text formats including numbers.

Label

Labels are used to create text labels for items in an interface.

Layout

Layout component, while not visible in the user interface itself, provides a structure for other components using a one or two column layout system.

Link

Links are used in content paragraphs to create pathways from one page to another. If you need a link with semi bold font-weight and/or icon, please use Button component instead.

List
New

Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.

List Item
New

List Item is a component used inside List. For concrete usage examples, please see the List component.

Logo

Logo is a component used inside the header and footer components. Logo prodives options to customize the language and appearance in addition to theme.

Modal
New

Modals are used to display content that temporarily blocks interactions with the main view of an application. Modals should be used sparingly only when necessary.

Number Input
New

Number input lets user specify a numeric value using plus and minus buttons which must be no less than a given value, and no more than another given value.

Paragraph

Paragraphs are blocks of text separated from adjacent blocks by blank lines.

Radio

Radio Buttons are graphical interface elements that allow user to choose only one of a predefined set of mutually exclusive options.

Radio Group

Radio group allows user to select one option from a set of options. Use value on group to set the selected option.

Range Slider

Range Slider lets user specify a numeric value using a slider which must be no less than a given value, and no more than another given value.

Select

Select lets user choose one option from an options menu. Consider using select when you have 4 or more options. Select component supports any content type.

Spacer

Spacer component is used to give additional white space between two components in an interface. You can customize the size and direction with the provided properties.

Spinner

Spinners are used to indicate users that their action is being processed. Duet’s spinner is built entirely with HTML and CSS, and doesn’t rely on JavaScript.

Step
New

Step is a component used inside Stepper. A step consists of a numbered heading and content. For concrete usage examples, please see the Stepper component.

Stepper
New

Stepper is used to create wizard-like workflows by dividing content into logical steps. The user can navigate backwards by clicking on the header of a completed step.

Tab

Tab is a component used inside the Tab Group to generate panels that can be navigated using tabs. For concrete usage examples, please see Tab Group component.

Tab Group

Tab Group is used as a graphical interface element that allows multiple panels to be contained within a single window, using tabs as a navigational element.

Table
New

Table is a lightweight and un-opinionated component for enhancing tabular data. It offers features like sticky headers, support for narrow viewport widths, and table styles.

Textarea

Textarea specifies a control that allows user to write text over multiple rows. Used when the expected user input is long. For shorter input, use the Input component.

Toggle

Toggles are graphical interface switches that give user control over a feature or option that can be turned on or off.

Tooltip
New

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when user clicks or navigates to it via keyboard.

Visually Hidden

Visually Hidden is used when an element needs to be available to assistive technology, but otherwise hidden.

Date Picker
Planned

Date Picker lets user pick a single date or a date range using a special calendar like date picker interface.

Pagination
Planned

Paginations are used to create controls that allow user to browse paged content from page to page.

Filter
Planned

Filters provide a way to see only the data that user wants displayed.

Component Released in Accessibility i18n SSR Status

Alert

1.0.50

N/A

Supported

Supported

Ready

Badge

3.2.1

Keyboard, Screen Reader

Supported

Supported

New

Button

1.0.15

Keyboard, Screen Reader

Supported

Supported

Ready

Caption

2.6.16

Keyboard, Screen Reader

Supported

Supported

New

Card

1.4.1

N/A

Supported

Supported

Ready

Checkbox

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Choice

2.6.11

Keyboard, Screen Reader

Supported

Supported

New

Choice Group

2.8.1

Keyboard, Screen Reader

Supported

Not supported

New

Collapsible

3.4.13

Keyboard, Screen Reader

Supported

Supported

New

Definition List

2.4.4

Keyboard, Screen Reader

Supported

Not supported

Deprecated

Divider

1.0.49

N/A

N/A

Supported

Ready

Footer

2.4.6

Keyboard, Screen Reader

Supported

Supported

Ready

Grid

2.7.0

N/A

N/A

Supported

New

Grid Item

2.7.0

N/A

N/A

Supported

New

Header

3.0.0

Keyboard, Screen Reader

Supported

Supported

Ready

Heading

1.5.4

Keyboard, Screen Reader

Supported

Supported

Ready

Hero Area

1.1.6

Keyboard, Screen Reader

Supported

Supported

Ready

Icon

2.7.0

Keyboard, Screen Reader

N/A

Supported

New

Input

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Label

1.0.14

Keyboard, Screen Reader

Supported

Supported

Ready

Layout

1.4.0

N/A

N/A

Supported

Ready

Link

1.0.21

Keyboard, Screen Reader

Supported

Supported

Ready

List

3.3.0

Keyboard, Screen Reader

Supported

Supported

New

List Item

3.3.0

Keyboard, Screen Reader

Supported

Supported

New

Logo

1.0.49

Keyboard, Screen Reader

Supported

Supported

Ready

Modal

3.1.3

Keyboard, Screen Reader

Supported

Not supported

New

Number Input

3.4.8

Keyboard, Screen Reader

Supported

Supported

New

Paragraph

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Radio

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Radio Group

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Range Slider

1.3.2

Keyboard, Screen Reader

Supported

Supported

Ready

Select

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Spacer

1.0.19

N/A

N/A

Supported

Ready

Spinner

1.0.15

N/A

Supported

Supported

Ready

Step

3.2.0

Keyboard, Screen Reader

Supported

Not supported

New

Stepper

3.2.0

Keyboard, Screen Reader

Supported

Not supported

New

Tab

2.6.8

Keyboard, Screen Reader

Supported

Supported

Ready

Tab Group

2.6.8

Keyboard, Screen Reader

Supported

Supported

Ready

Table

3.4.0

Keyboard, Screen Reader

Supported

Supported

New

Textarea

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Toggle

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Tooltip

1.5.0

Keyboard, Screen Reader

Supported

Supported

New

Visually Hidden

1.0.28

Keyboard, Screen Reader

N/A

Supported

Ready
Date picker N/A N/A N/A N/A
Planned
Pagination N/A N/A N/A N/A
Planned
Filter N/A N/A N/A N/A
Planned
Status:
Ready, can be used in production.
In Review, ready to be used soon.
Prototype, do not use.