EmptyState

A feedback component that provides guidance, context, or action items when a view has no data to display.

Header

Alice was beginning to get very tired

Sizes

Use the empty-state-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Header

Alice was beginning to get very tired

Header

Alice was beginning to get very tired

Header

Alice was beginning to get very tired

Customizing

globals.css


:root {
  --ex-empty-state-font-size-sm: var(--text-xs);
  --ex-empty-state-font-size-md: var(--text-sm);
  --ex-empty-state-font-size-lg: var(--text-base);
 
  --ex-empty-state-section-gap-x-sm: calc(var(--spacing) * 2);
  --ex-empty-state-section-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-empty-state-section-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-empty-state-section-gap-y-sm: calc(var(--spacing) * 2);
  --ex-empty-state-section-gap-y-md: calc(var(--spacing) * 2);
  --ex-empty-state-section-gap-y-lg: calc(var(--spacing) * 2);
 
  --ex-empty-state-section-px-sm: calc(var(--spacing) * 4);
  --ex-empty-state-section-py-sm: calc(var(--spacing) * 4);
 
  --ex-empty-state-section-px-md: calc(var(--spacing) * 5);
  --ex-empty-state-section-py-md: calc(var(--spacing) * 5);
 
  --ex-empty-state-section-px-lg: calc(var(--spacing) * 6);
  --ex-empty-state-section-py-lg: calc(var(--spacing) * 6);
 
  --ex-empty-state-indicator-font-size-sm: var(--text-lg);
  --ex-empty-state-indicator-font-size-md: var(--text-xl);
  --ex-empty-state-indicator-font-size-lg: var(--text-2xl);
 
  --ex-empty-state-indicator-opacity: var(--ex-options-opacity-subtle);
 
  --ex-empty-state-title-font-size-sm: var(--text-sm);
  --ex-empty-state-title-font-size-md: var(--text-base);
  --ex-empty-state-title-font-size-lg: var(--text-lg);
 
  --ex-empty-state-title-font-weight: var(--font-weight-semibold);
 
  --ex-empty-state-description-font-size-sm: var(--text-xs);
  --ex-empty-state-description-font-size-md: var(--text-sm);
  --ex-empty-state-description-font-size-lg: var(--text-base);
 
  --ex-empty-state-description-font-weight: var(--font-weight-normal);
  --ex-empty-state-description-opacity: var(--ex-options-opacity-muted);
}

API

EmptyState

Element	Selector
`EmptyState`	`.ex-empty-state`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

EmptyState Content

Element	Selector
`EmptyState.Content`	`.ex-empty-state-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

EmptyState Indicator

Element	Selector
`EmptyState.Indicator`	`.ex-empty-state-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

EmptyState Title

Element	Selector
`EmptyState.Title`	`.ex-empty-state-title`

Prop	Type	Default
`as`	`ElementType`	`h4`
`asChild`	`boolean`	`false`

EmptyState Description

Element	Selector
`EmptyState.Description`	`.ex-empty-state-description`

Prop	Type	Default
`as`	`ElementType`	`p`
`asChild`	`boolean`	`false`