Overview

Components consist of elements and features that form a single artifact within the system. They are the building blocks used to create scalable, responsive online experiences within Dell. The design system library is an always-growing selection of components that each contain one or more kinds to fit multiple scenarios.


Components

Accordion

Accordions are a list of headers that expand and collapse to reveal hidden content blocks. They help reduce scrolling, and shorten pages.

Action menu

An action menu presents users with additional options when there are space constraints within a layout. It is paired with an image, link, button, or another element that, when selected, opens the action menu.

Badge

A badge is a visual label or indicator used to convey status or highlight content.

Blockquote

A blockquote is a quotation with a citation, designed to be offset from the main text on a page.

Breadcrumb

A breadcrumb is a type of contextual navigation that shows a user’s position within the hierarchy of a site and allows them to navigate back through the site’s levels.

Button

Buttons are used to initiate actions within an application, website, or other digital experience. Their labels clearly describe the action they trigger.

Card

Cards are containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.

Carousel

Carousel is a container that enables users to navigate horizontally to view different content placed inside the component.

Checkbox

Checkboxes allow a user to select multiple options from a category. A checkbox can also be used to display a single option that may require additional acceptance or confirmation prior to submission.

Date picker

A date picker allows a user to specify a date through a text input or expandable calendar menu.

Divider

A divider is a thin line placed either horizontally or vertically between elements.

Drawer

A drawer is a secondary content component that sits off-screen until triggered by the user.

Dropdown

Dropdowns present users with a list or menu of options. Users can filter these options and select multiple options concurrently.

File input

File input is an interactive field that allows users to select files. It’s commonly used in form patterns.

Footnote

A footnote provides additional information or a source for content in the main body of a page.

Link

Links are interactive elements that allow users to navigate to a new page or website, or jump to a section of the current page.

List

Lists are used to organize a group of related text elements.

Loading indicator

A loading indicator is a visual animation used to convey processing or loading, but does not indicate how long the activity will take to complete.

Message bar

Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow.

Modal

A modal is a dialog that intentionally interrupts a user's page experience. It's often used for critical information or for actions that require review or completion prior to returning to the task flow or page.

Notification

A notification is nonmodal dialog. It shows users contextual, timely, and noncritical feedback and messages.

Overlay

An overlay is a temporary transparent layer that covers page content, shifting focus to a new content element.

Pagination

Pagination divides a collection of data or other content types such as images, cards, or search results into multiple pages showing a fixed number of items per page.

Popover

Popover is a container that floats over page content after pressing a trigger element. It contains supplemental content related to its trigger and can be customized to include text, images, and interactions.

Progress bar

Progress bars are used to convey the duration of system processes, including installation and uploading or downloading files, images, or updates.

Progress tracker

Progress trackers display the user’s location within a multistep process while providing the status of each step.

Radio button

Radio buttons require users to make one selection from a group of options. Because the user can select only one option, radio buttons are used to present mutually-exclusive choices.

Search

Search is an input that allows users to look for a specific keyword or phrase and obtain results related to the context in which it is placed.

Select

This component allows users to select an option from a list of five or more choices and generally requires a final submit action to confirm the selection.

Side navigation

Side navigation is a hierarchical, vertical navigation component featured on the right or left side of a page or screen.

Switch

A switch allows users to choose between two mutually exclusive settings and is commonly used to control preferences within an application.

Table

A table contains data arranged in rows and columns. They are used to communicate relationships between content and to display references, comparisons, and choices.

Tabs

Tabs help organize similar types of content on a screen and allow users to move easily between alternate views within the same context.

Tag

Tags are small, interactive labels used to visually group, classify, or filter criteria.

Text area

The text area component is a field for plain-text input, often used in forms.

Text input

Text input is an interactive field that allows users to enter text and data. It's commonly used in form patterns.

Time picker

Time pickers help users select a specific time or a range of times.

Tooltip

Tooltips are containers that temporarily display short, contextual text. They are typically activated when a user hovers over an icon or other trigger.

View more/less

This component is used to hide or reveal content. It saves space while preserving visual balance and maintaining information hierarchy.