components icon

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 consists of 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 other 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. The labels clearly describe the action that's triggered.

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.

Checkbox

Checkbox groups allow a user to select multiple options from a category. Standalone checkboxes 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 non-modal 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 non-modal 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.

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 pattern featured on the right or left side of a page or screen.

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. Features includes text inputs, text links, and sorting.

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.

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.