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 Review
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 Review
ComboBox is used as an alternative to a select box, where many items must be chosen from
Contact Card
Contact card is the default way to present contact details.
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
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
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 Button
Menu Bar Button is component to be used within Menu Bar to create buttons.
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
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
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.
Page Heading
Page heading is a wrapper for Heading component to create a brand themed intro for a page.
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
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.
Slideout
Slideout is component to be used to create slideouts.
Slideout Lang
Slideout Lang is component to be used within Slideout to create language chooser.
Slideout Link
Slideout Link is component to be used within Slideout to create links.
Slideout Panel
Slideout Panel is component to be used within Slideout to create panels.
Slideout Panel Dropdown
Slideout Panel Dropdown is component to be used within Slideout Panel to create dropdowns.
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 |
|---|---|---|---|---|---|
| 4.36.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.0.50 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.2.1 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.44.0 | Keyboard, Screen Reader | Supported | Supported | Review | |
| 1.0.15 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.6.16 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.4.1 | N/A | Supported | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.6.11 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.8.1 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.4.13 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 5.0.2 | Keyboard, Screen Reader | Supported | Supported | Review | |
| 6.7.1 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.4.2 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.0.49 | N/A | N/A | Supported | Ready | |
| 3.4.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.6.2 | N/A | N/A | Supported | Ready | |
| 4.17.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.4.6 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.7.0 | N/A | N/A | Supported | Ready | |
| 3.0.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.5.4 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.1.6 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.7.0 | Keyboard, Screen Reader | N/A | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.0.14 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.4.0 | N/A | N/A | Supported | Ready | |
| 1.0.21 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.0.49 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.1.3 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.0.8 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.12.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.12.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.4.8 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.5.3 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.36.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.30.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.3.2 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.6.8 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.4.0 | N/A | N/A | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.0.19 | N/A | N/A | Supported | Ready | |
| 1.0.15 | N/A | Supported | Supported | Ready | |
| 3.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 2.6.8 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 3.4.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.3.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 6.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.5.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.2.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 4.30.0 | Keyboard, Screen Reader | Supported | Supported | Ready | |
| 1.0.28 | Keyboard, Screen Reader | N/A | Supported | Ready |
Ready, can be used in production. 
In Review, ready to be used soon. 
Prototype, do not use.