NVIDIA Elements Components

An accordion is a vertical stack of interactive headings used to toggle the display of further information.

Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

Avatar represents a user/bot within a UI. Typically with text or image content.

A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.

Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.

A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.

A container for content representing a single entity.

A chat message component displays a text message within a conversation, sent between users or bots

A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.

A color picker is a control that enables users to choose a color value.

An editable combobox with autocomplete behavior and selection support.

Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.

A copy button is a button that easily enables the copy to clipboard pattern.

A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.

A date picker is a control that enables users to choose a date value.

A datetime picker is a control that enables users to choose a datetime value.

Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

Divider is a component that separates and distinguishes sections of content or groups of menuitems.

A visual indicator that communicates a status or notification of an associated component.

Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience

A dropzone form control that enables users to drag and drop files onto it.

A file picker is a control that enables users to choose a file value.

Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element. Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.

A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat. Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.

Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element. Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.

An icon is a graphic symbol designed to visually show the purpose of an interface element.

An icon button is a button that displays only an icon without a visual label.

An input is a control that enables users to enter text.

Visually combines many related input controls into a unified composite field with shared styling.

A visual indicator for a brand or application.

A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.

A month picker is a control that enables users to choose a month value.

Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

Provide a consistent page structure across the applications, ensuring a seamless user experience.

An element that appears across the top of all pages containing the application name and primary navigation.

Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.

Pagination is a control that enables users to navigate through pages of content.

Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).

A password is a control that enables users to enter password text.

A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.

A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.

The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.

A filter chip is a control that enables users to select many options from a set of choices.

Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.

A radio button is a control that enables users to choose one option from a list of mutually exclusive options.

A range slider is a control that enables users to choose a value from a continuous range of values.

A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.

A search is a control that enables users to enter text to search.

A select is a control that enables users to select an option from a list of options.

A loading placeholder component that displays animated placeholder shapes while content loads.

A sort button is a control that enables users to sort a list of items in ascending or descending order.

A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).

A star rating component lets users rate something using stars, providing a quick visual representation of feedback

Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.

A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.

Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.

A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.

A textarea is a control that enables users to enter and edit text.

A time picker is a control that enables users to choose a time value.

A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.

A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

A week picker is a control that enables users to choose a week value.

A container for content representing programming languages.

A Web Component that inputs markdown content and renders it as HTML formatted with Elements styles.

A low-level Monaco Editor wrapper that provides direct access to a diff editor instance and API.

An input control for editing diffs for JSON, YAML and code with syntax highlighting and validation.

A low-level Monaco Editor wrapper that provides direct access to an editor instance and API.

An input control for editing JSON, YAML and code with syntax highlighting and validation.

A Monaco Editor based tree view for presenting problems (i.e. diagnostics markers).