Empty state

The empty state component informs users that a set of data is empty or that something has yet to happen. It may also provide suggestions to complete, refresh, or fill the region.

When a user reaches empty data, the empty state should be displayed.

Optionally, an empty state may include an icon or progress ring, a message that alerts the user, or a button that prompts the user toward an action.

A button can also be displayed in the empty state, typically in order to encourage the user to take some action.

This variation is displayed as “--“. It is typically used in a list item in a field, if no value has been entered and it is important for the user to be notified.

Ensure empty state language is consistent across each use case. Refer to these guidelines to understand which language to use for each use case:

• If no items are available to display in a UI element because no items have been added to it, the empty state should read “No items”. For example, you can use this language when there are no items to show in a files and documents widget.
• If the user has conducted a search, but no results were found, the empty state should read “No items found” in the results area.
• If the user has not yet conducted a search, the empty state should read “Search to view results” in the results area.

No configuration is needed for this component in Constellation.

All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Documentation.

• Avatar

• Badge

• Icon