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
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
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
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
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
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.
Cookie Consent
Cookie consent component informs users about cookie usage. This banner is shown when they visit a website or an application for the first time.
Date Picker
Date Picker component lets user pick a single date or a date range using a special calendar like date picker interface. There’s also open source version of this component available.
Divider
Dividers are used to represent thematic breaks between paragraph-level elements. Visually, they look like horizontal rules or lines.
Empty State
New
Empty state component is used when another component has no items or data to show. Empty state provides explanation or guidance to help user progress.
Fieldset
New
Fieldset is used to group together several related form components and a label. The usage of this component helps to make these groups accessible for assistive technologies.
Footer
Footer component is used as the global footer for all views. Contains copyright data and links to related documents.
Grid
Grid component provides structure for other components using Flexbox based layout system. Grid allows nesting and defining the direction of the content.
Grid Item
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
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. Most commonly used inside other form components.
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
Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.
List Item
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 <a href="/components/footer/">Footer components. Logo prodives options to customize the language and appearance in addition to theme.
Modal
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.
Notification
New
Notifications encourage users to take an action related to a recent update or an opportunity. They are most commonly displayed inside Notification Drawer.
Notification Drawer
New
Notification Drawer informs users about recent notification messages. Notification Drawer can be used to display up to 20 notification messages.
Number Input
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 6 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
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
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
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
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.
Tray
Tray component is used to reveal additional information on a small viewport, that would normally be shown in the sticky sidebar of the Layout component.
Visually Hidden
Visually Hidden is used when an element needs to be available to assistive technology, but otherwise hidden.
Pagination Planned
Paginations are used to create controls that allow user to browse paged content from page to page.
| Component | Released in | Accessibility | i18n | SSR | Status |
|---|---|---|---|---|---|
|
1.0.50 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.2.1 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.0.15 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.6.16 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.4.1 |
N/A |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.6.11 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.8.1 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.4.13 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
4.2.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
4.4.2 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.0.49 |
N/A |
N/A |
Supported |
|
|
|
4.6.2 |
N/A |
N/A |
Supported |
|
|
|
4.17.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.4.6 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.7.0 |
N/A |
N/A |
Supported |
|
|
|
2.7.0 |
N/A |
N/A |
Supported |
|
|
|
3.0.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.5.4 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.1.6 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.7.0 |
Keyboard, Screen Reader |
N/A |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.0.14 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.4.0 |
N/A |
N/A |
Supported |
|
|
|
1.0.21 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.0.49 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.1.3 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
4.12.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
4.12.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.4.8 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.2 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.0.19 |
N/A |
N/A |
Supported |
|
|
|
1.0.15 |
N/A |
Supported |
Supported |
|
|
|
3.2.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.2.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.6.8 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
2.6.8 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
3.4.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.3.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.5.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
4.2.0 |
Keyboard, Screen Reader |
Supported |
Supported |
|
|
|
1.0.28 |
Keyboard, Screen Reader |
N/A |
Supported |
|
|
| Pagination | N/A | N/A | N/A | N/A |
Ready, can be used in production.
In Review, ready to be used soon.
Prototype, do not use.