Components

An avatar is a visual representation of a user or object.

A badge is a compact UI element providing brief, descriptive information about an element and its surrounding context. It is terse, ideally one word.

A banner is a type of Notice, delivering system and engagement messaging. It is highly intrusive and should be used sparingly and appropriately.

Breadcrumbs are links used to provide context for the currently-viewed page and where it is located within the overall site structure.

A button is an UI element which signals key actions to take an action throughout an app. It is important a button is identifiable, consistent, communicates its actions clearly, and is appropriately sized to its action.

Used for grouping buttons that share a relationship or perform similar actions.

A card contains summary content and actions about a single subject. It can be used by itself or within a list, and is generally interactive.

A checkbox is an input control that allows users to select zero, one, or more options from a number of choices.

Checkbox groups are convenient components for a grouping of related Checkboxes.

A Chip is a compact UI element that provides brief, descriptive information about an element. It is terse, ideally one word.

A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.

A combobox is a semantic component that displays an input element combined with a listbox, which enables the user to select items from the list.

Select allows users to make a single selection or multiple selections from a list of options.

A combobox that renders the listbox inside a popover therefore the listbox is rendered at the root of the document.

Datepicker component will provide a calendar to select a date.

Description lists are a way to group and clarify associated ideas. They are notably useful when outlining and explaining terms, like those in a glossary.

A Dropdown presents a list of options or actions.

Renders an emoji from a shortcode such as :smile: or unicode character such as 😄.

A emoji picker component that allows you to view and select an emoji from a list.

Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.

Indicates no data is available to display, provides clarification, and guidance on how to proceed.

A Hovercard toggles a content overlay when its anchor element is hovered for a minimum amount of time.

Collection of customizable symbols and sizes

The Illustration component provides a set of images to provide context to your application

Image Viewer lets the user click on an image to see it in a full screen modal.

An input field is an input control that allows users to enter alphanumeric information. It can have a range of options and supports single line and multi-line lengths, as well as varying formats, including numbers, masked passwords, etc.

Input Groups are convenience components for a grouping of related inputs. While each input within the group could be independent, the v-model on the group provides a convenient interface for determining the current state of the group.

An item layout provides a standardized group of containers to enable developer to use list-item like stack. It is used as base for `dt-list-item` component

This component displays a visual representation of a keyboard shortcut to the user.

Lazy show is a utility component that prevents its children from being rendered until the first time it is shown.

A link is a navigational element that can be found on its own, within other text, or directly following content.

A list item is an element that can be used to represent individual items in a list.

The "List Item Group" component uses a non interactive heading which groups list items.

A loader is a visual indicator that a task is in progress.

A modal focuses the user’s attention on a single task or message.

A versatile, accessible text animation component with multiple animation modes, full accessibility support, and comprehensive customization options.

A notice is an informational and assistive message that appears inline with content.

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

A Popover displays a content overlay when its anchor element is activated.

A circular SVG progress indicator for determinate upload or processing progress.

A visual control element indicating the current status of a user.

A radio is an input control that allows users to select only one option from a number of choices.

Radio groups are control elements that allow the user to make a single selection from a list of options.

A layout component that lets users resize adjacent panels by dragging a handle between them.

A rich text editor is a component that allows users to format text with a variety of styles. It enables also mixing text with custom components built as extensions, such as links and user mentions.

A root layout provides a standardized group of containers to display content at the root level.

A directive that adds a custom overlay scrollbar to any scrollable region.

A scroller component that allows blazing fast scrolling of any amount of data.

A select menu is an input control that allows users to choose one option from a list.

Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate that content is in the process of loading. Skeleton is used to provide a low fidelity representation of the user interface (UI) before content appears on the page.

A Split Button offers a default action paired with a secondary action to reveal alternate or related actions.

Foundational layout primitive for elements along a vertical or horizontal axis, with consistent spacing and alignment.

A table is a pattern for organizing data sets. While data visualization helps quickly summarize a data set, a table allows users to compare and analyze individual data rows.

Tabs allow users to navigation between grouped content in different views while within the same page context.

A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions. It contains at-a-glance information about outcomes and can be paired with actions.

A toggle, or "switch", is a button control element that allows the user to make a binary selection.

A tooltip is a floating label that briefly explains an action, function, or an element. Its content is exclusively text and shouldn't be vital information for users. If richer media is desired, consider using a popover instead.

Validation messages are used to convey information to the user about the current state of the input element. These messages can have an error, warning or success type.