EmptyState

Use the EmptyState to communicate that no data is available for a section or view and guide users toward resolving the situation with a clear title, description, and actions.

OverviewPropertiesUsageChangelog

GenericEmptyStateProps

extends, , , , ,

Name	Type	Default	Description
size?	| | |	'default'	Size of the empty state component. 'auto' adapts the size to the width of the parent element.

EmptyState.VisualPreset

EmptyStateVisualPresetProps

extends,

Name	Type	Default	Description
context	| | | |		The visual context of the illustration.
type	| | | |		A visual cue added to the illustration hinting at the reason the state is empty.

Illustration cues

Tip

To learn when to use each type or context, see Usage.

type	Cue
something-missing	Question mark
no-result	Empty circle
something-wrong	Cross
create-new	Plus
no-permission	Lock