<h2>Usage</h2>
<p>There are several reasons why a user may encounter an empty state, including search results that do not match the user’s criteria, a new experience that has yet to be configured, and clearing an inbox. An empty screen or container within a screen is an opportunity to provide a user with additional information, whether it’s a suggestion to the user to take immediate action or to try again later. In any case, providing insight into why a user is seeing an empty state can alleviate confusion and help them understand what to do next.</p>
<br/>

<p>Empty states can use call-to-action <a href="/components/button/">buttons</a> when the next step is obvious to the user. Limit the number of buttons used to provide a clear course of action. For example, if the empty state is illustrating that there are no search results available, the button can provide a <a href="/components/link/">link</a> to return or try again. Or if the component is an interactive container, an empty state button can prompt the user to add content.</p>
<h3>No results</h3>
<p>An empty state may occur when a user searches for a product or item and there are no results to display. This can result from an incorrect search due to misspellings or through the application of <a href="/patterns/filter/">filters</a>, or from the result simply not existing in the catalog. In addition to telling the user that their search has no results, recommend they adjust their search or filters and check their spelling.</p>
<details data-name='image-block' data-images='[{"alt":"Example showing no results for &quot;abcd&quot;.","caption":"","url":"https://dds.dell.com/site/production/4d/ef/Empty_State_e_commerce_e4f95e6343.png"}]' data-numberofcolumns='1'></details>

<h3>First use</h3>
<p>First use products or applications will show an empty state until the user configures or creates the screen to their liking. This includes dashboard views and other areas where users are encouraged to personalize their view with information they find useful. In these instances, it is helpful to tell users that they need to configure their view and to provide a workflow to help them build the experience they need.</p>
<details data-name='image-block' data-images='[{"alt":"Example showing an empty dashboard page, with instructions on how to configure your view for the first time.","caption":"","url":"https://dds.dell.com/site/production/26/41/Empty_State_dashboard_10c391739a.png"}]' data-numberofcolumns='1'></details>

<h3>No data</h3>
<p>No data views are a hybrid of first use and no data views. In these cases, users may find a screen before there is information available to populate it. These can occur for <a href="/components/table/">tables</a> and <a href="/data-visualization/ddv-overview/">data visualizations</a>, where information may reset on a monthly or annual basis. For example, subscription storage usage or audit logs prior to any recorded activity.</p>
<details data-name='image-block' data-images='[{"alt":"Example showing a table that has no data yet to show.","caption":"","url":"https://dds.dell.com/site/production/8e/80/Empty_State_Table_9a80e2458d.png"}]' data-numberofcolumns='1'></details>

<h3>User-cleared</h3>
<p>These empty states occur when a user has completed all actions within an inbox or task list. As a direct result of user action, an empty state may not need to alert users to do anything more. Simply let users know that they’ve completed their tasks with a success message.</p>
<details data-name='image-block' data-images='[{"alt":"Example showing a user clearing their inbox.","caption":"","url":"https://dds.dell.com/site/production/92/f9/Empty_State_Inbox_dd0bb64213.png"}]' data-numberofcolumns='1'></details>

<h2>Layout</h2>
<p>Consider your product, its data, and your users when choosing a layout. All layouts should have a visual logic. Adjust your designs according to best practices for your experience. Empty state should always be vertically and horizontally aligned in the middle of the component. The minimum and maximum width are always equal.</p>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

Empty states are used to convey that no data is available for display.

Empty State

Empty state

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>


DDS Feedback Form has been updated

Home

About DDS

Figma

Data visualization

Migration guide

A11y annotation kit

AI chat toolkit

Contributor sandbox

Getting started

Changelog

Roadmap

Updates

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Category navigation

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Table

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

Micro-moments

AI Chat Toolkit

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Chart customization

Drag and drop

Filter

Form

Microinteraction

Sign-in

Table view

Patterns

Accessibility

Brand

Partners

Case studies

FAQs

Tools

Videos

Dell Design System v1

Resources

Send Feedback

Check My Tickets

Find us on Teams

Support