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, create a feature request.

Action Button

The action button is used internally in duet-pagination, duet-date-picker and duet-editable-table

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.

Breadcrumbs
Prototype

Breadcrumbs are used to visualize the path to the currently open resource. It is designed to be used below header element.

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.

Combobox
Prototype

ComboBox is used as an alternative to a select box, where many items must be chosen from

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.

Editable Table

Editable Table is a functional component for enhancing tabular data with editable possibilities. It is based upon duet-table but is intended to take a Javascript Map of Records and map them into grouped sections

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.

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.

Menu Bar

Menu Bar is a bar component that contains menus.

Menu Bar Dropdown

Menu Bar Dropdown is component to be used within Menu Bar to create dropdowns.

Menu Bar Dropdown Link

Menu Bar Dropdown Link is component to be used with Menu Bar Dropdown to create dropdown links.

Menu Bar Link

Menu Bar Link is component to be used within Menu Bar to create links.

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.

Multiselect

Select lets user choose multiplse options from an options menu. Consider using select if there is no need for multiple option selection. The amount of options should be limited.

Nav

Nav is a the main navigation component.

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.

Pagination

The pagination component makes it easy to display a list of page numbers for your users, so that they may navigate large datasets

Paragraph

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

Progress
Prototype

The progress component is used to indicate any process that is ongoing and time sensitive

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.

Range Stepper

range-stepper is a component that can be used to step through a series of value ranges

Scrollable

Scrollable is used as a container for a series of elements that you want to scroll horizontally.

Section layout

Complements duet-layout component in desings where there are no side bars but instead multiple full-width sections with possibly different backgrounds.

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.

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.

Submenu Bar

Submenu Bar is a bar component that contains links and dropdowns.

Submenu Bar Dropdown

Submenu Bar Dropdown is component to be used within Submenu Bar to create dropdowns.

Submenu Bar Dropdown Link

Submenu Bar Dropdown Link is component to be used with Submenu Bar Dropdown to create dropdown links.

Submenu Bar Link

Submenu Bar Link is component to be used with Submenu Bar to create navigation links.

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.

Toolbar

Toolbar is component that is used with Toolbar items to create top navigation area.

Toolbar Dropdown

Toolbar Dropdown is component to be used within Toolbar to create dropdowns.

Toolbar Dropdown Link

Toolbar Dropdown Link is component to be used with Toolbar Dropdown to create dropdown links.

Toolbar Link

Toolbar Link is component to be used with Toolbar to create navigation links.

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.

Upload

The upload component is used to allow users to upload one / several files to an upload server.

Visually Hidden

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

Component Released in Accessibility i18n SSR Status

Action Button

4.36.0

Keyboard, Screen Reader

Supported

Supported

Ready

Alert

1.0.50

Keyboard, Screen Reader

Supported

Supported

Ready

Badge

3.2.1

Keyboard, Screen Reader

Supported

Supported

Ready

Breadcrumbs

4.44.0

Keyboard, Screen Reader

Supported

Supported

Prototype

Button

1.0.15

Keyboard, Screen Reader

Supported

Supported

Ready

Caption

2.6.16

Keyboard, Screen Reader

Supported

Supported

Ready

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

Ready

Choice Group

2.8.1

Keyboard, Screen Reader

Supported

Supported

Ready

Collapsible

3.4.13

Keyboard, Screen Reader

Supported

Supported

Ready

Combobox

5.0.2

Keyboard, Screen Reader

Supported

Supported

Prototype

Cookie Consent

4.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Date Picker

4.4.2

Keyboard, Screen Reader

Supported

Supported

Ready

Divider

1.0.49

N/A

N/A

Supported

Ready

Editable Table

3.4.0

Keyboard, Screen Reader

Supported

Supported

Ready

Empty State

4.6.2

N/A

N/A

Supported

New

Fieldset

4.17.0

Keyboard, Screen Reader

Supported

Supported

New

Footer

2.4.6

Keyboard, Screen Reader

Supported

Supported

Ready

Grid

2.7.0

N/A

N/A

Supported

Ready

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

Ready

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

Ready

List Item

3.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Logo

1.0.49

Keyboard, Screen Reader

Supported

Supported

Ready

Menu Bar

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Menu Bar Dropdown

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Menu Bar Dropdown Link

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Menu Bar Link

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Modal

3.1.3

Keyboard, Screen Reader

Supported

Supported

Ready

Multiselect

6.0.8

Keyboard, Screen Reader

Supported

Supported

Ready

Nav

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Notification

4.12.0

Keyboard, Screen Reader

Supported

Supported

New

Notification Drawer

4.12.0

Keyboard, Screen Reader

Supported

Supported

New

Number Input

3.4.8

Keyboard, Screen Reader

Supported

Supported

Ready

Pagination

4.36.0

Keyboard, Screen Reader

Supported

Supported

Ready

Paragraph

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Progress

4.30.0

Keyboard, Screen Reader

Supported

Supported

Prototype

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

Range Stepper

3.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Scrollable

2.6.8

Keyboard, Screen Reader

Supported

Supported

Ready

Section layout

1.4.0

N/A

N/A

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

Stepper

3.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Submenu Bar

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Submenu Bar Dropdown

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Submenu Bar Dropdown Link

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Submenu Bar Link

6.2.0

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

Ready

Textarea

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Toggle

1.3.0

Keyboard, Screen Reader

Supported

Supported

Ready

Toolbar

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Toolbar Dropdown

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Toolbar Dropdown Link

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Toolbar Link

6.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Tooltip

1.5.0

Keyboard, Screen Reader

Supported

Supported

Ready

Tray

4.2.0

Keyboard, Screen Reader

Supported

Supported

Ready

Upload

4.30.0

Keyboard, Screen Reader

Supported

Supported

Ready

Visually Hidden

1.0.28

Keyboard, Screen Reader

N/A

Supported

Ready
Status:
Ready, can be used in production.
In Review, ready to be used soon.
Prototype, do not use.