Overview

UsageComing soon

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Empty State

Displays an empty state with optional icon and title.

 import { ArchiveIcon } from '@radix-ui/react-icons';

function Example() {
  return <EmptyState.Root title="No items found" icon={ArchiveIcon} />;
}

Props

EmptyState.Action

`asChild`

boolean

`color`

grayyellowredpurple

`ghost`

boolean

`highContrast`

boolean

`loading`

boolean

`radius`

smallnonemediumlargefull

`size`

1234

`state`

deprecated

disablednormalloading

`type`

buttonsubmitreset

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

EmptyState.Subtitle

`align`

centerleftright

`as`

divlabelpspan

`asChild`

boolean

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`highContrast`

boolean

`size`

123456789

`trim`

endnormalbothstart

`truncate`

boolean

`weight`

boldmediumlightregular

`wrap`

wrapnowrapprettybalance

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

EmptyState.Title

`align`

centerleftright

`as`

divlabelpspan

`asChild`

boolean

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`highContrast`

boolean

`size`

123456789

`trim`

endnormalbothstart

`truncate`

boolean

`weight`

boldmediumlightregular

`wrap`

wrapnowrapprettybalance

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

Basic

Use the title prop to display a basic empty state message.

 function Example() {
  return <EmptyState.Root title="No results found" />;
}

With Icon

Use the icon prop to display an icon above the title.

 import { PersonIcon } from '@radix-ui/react-icons';

function Example() {
  return (
    <Flex direction="column" gap="6">
      <EmptyState.Root title="No users have been created" icon={PersonIcon} />
    </Flex>
  );
}

With Subtitle

Use the subtitle prop to display a subtitle below the title.

 function Example() {
  return (
    <EmptyState.Root
      subtitle="There are no users belonging to this organization."
      title="No users"
    />
  );
}

You can also customize the subtitle by passing a React element.

 function Example() {
  return (
    <EmptyState.Root
      subtitle={
        <EmptyState.Subtitle>
          There are no users belonging to the{' '}
          <Link href="#">
            <Text weight="bold">SuperTeam</Text>
          </Link>{' '}
          organization.
        </EmptyState.Subtitle>
      }
      title="No users"
    />
  );
}

We recommend using the EmptyState.Subtitle component and only making minor adjustments to the styling to avoid inconsistencies across the app.

Sizes

Use the size prop to control the size of the empty state. Size 1 is reserved for smaller, more compact views (like a CardList), whereas Size 2 is the default used for empty tables.

 import { PersonIcon } from '@radix-ui/react-icons';

function Example() {
  return (
    <Flex direction="column" gap="6">
      <EmptyState.Root
        title="No users have been created"
        icon={PersonIcon}
        size="1"
      />
      <EmptyState.Root
        title="No users have been created"
        icon={PersonIcon}
        size="2"
      />
    </Flex>
  );
}

Examples

With Children

Use the children prop to display additional text content below the title. This is useful for displaying additional information or instructions.

For actionable content such as buttons or links, use the action prop.

 import { PersonIcon } from '@radix-ui/react-icons';

function Example() {
  return (
    <EmptyState.Root
      title="Not permitted to perform this action"
      icon={PersonIcon}
    >
      <Text as="p" size="2">
        Please contact your administrator.
      </Text>
    </EmptyState.Root>
  );
}

With Action Button

Use the action prop to display actionable content below the title, such as buttons. We recommend using the EmptyState.Action component to represent the action button for consistent styling.

 import { PersonIcon } from '@radix-ui/react-icons';

function Example() {
  return (
    <EmptyState.Root
      title="No users have been created"
      icon={PersonIcon}
      action={
        <EmptyState.Action mt="3" size="2">
          Create user
        </EmptyState.Action>
      }
    />
  );
}

With a Custom Title

In some cases you may want to customize the title for more granular control over the look and feel of the empty state. For example you may want only a portion of the title to be bold to place emphasis on it.

We recommend using the EmptyState.Title component and only making minor adjustments to the styling to avoid inconsistencies across the app.

 import { GlobeIcon } from '@radix-ui/react-icons';

function Example() {
  return (
    <EmptyState.Root
      title={
        <EmptyState.Title weight="normal">
          No origins match the term <Text weight="bold">workos.com</Text>.
        </EmptyState.Title>
      }
      icon={GlobeIcon}
    >
      <Text align="center" as="p" color="gray" size="2">
        Edit your search term to find a match.
      </Text>
    </EmptyState.Root>
  );
}

Variants

Dashboard

10 variants found

size 2 emptystate in Content Paneldashboard

/:environmentId/roles-and-permissions/resource-types/edit/content-panel

size=2

size 2 emptystate in Add Provider Dialogdashboard

size=2

EmptyState in Audit Logs Empty Statedashboard

EmptyState in Audit Log Events Empty Statedashboard

Primary emptystate in Flags Empty Statedashboard

color=purple

Primary emptystate in Roles Sectiondashboard

color=purple

size 1 emptystate in Template Previewdashboard

size=1

size 1 emptystate in Radar List Tabledashboard

size=1

EmptyState in Overview Carddashboard

color=gray

EmptyState in Detections Overview Carddashboard

color=gray

Context

EmptyState.Action

Prop	Type	Default	Required
`asChild`	`boolean`	—	no
`color`	`"gray" \| "yellow" \| "red" \| "purple"`	—	no
`ghost`	`boolean`	—	no
`highContrast`	`boolean`	—	no
`loading`	`boolean`	—	no
`radius`	`"small" \| "none" \| "medium" \| "large" \| "full"`	—	no
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	—	no
`state`deprecated	`"disabled" \| "normal" \| "loading"`	—	no
`type`	`"button" \| "submit" \| "reset" \| null`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

EmptyState.Subtitle

Prop	Type	Default	Required
`align`	`Responsive<"center" \| "left" \| "right">`	—	no
`as`	`"div" \| "label" \| "p" \| "span"`	—	no
`asChild`	`boolean`	—	no
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`highContrast`	`boolean`	—	no
`size`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">`	—	no
`trim`	`Responsive<"end" \| "normal" \| "both" \| "start">`	—	no
`truncate`	`boolean`	—	no
`weight`	`Responsive<"bold" \| "medium" \| "light" \| "regular">`	—	no
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

EmptyState.Title

Prop	Type	Default	Required
`align`	`Responsive<"center" \| "left" \| "right">`	—	no
`as`	`"div" \| "label" \| "p" \| "span"`	—	no
`asChild`	`boolean`	—	no
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`highContrast`	`boolean`	—	no
`size`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">`	—	no
`trim`	`Responsive<"end" \| "normal" \| "both" \| "start">`	—	no
`truncate`	`boolean`	—	no
`weight`	`Responsive<"bold" \| "medium" \| "light" \| "regular">`	—	no
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

stateType: "disabled" | "normal" | "loading"

Usage

Used 75 times across 1 package

Dashboard

Variant Distribution

size

60%

40%

color

purple

60%

gray

40%

Where it's used

33 files

packages/dashboard/src/components/webhooks/webhooks-for-endpoint-table-with-detail/webhooks-table/empty-state.tsx5

packages/dashboard/src/components/flags/flags-empty-state.tsx4

packages/dashboard/src/components/permissions/permissions-section.tsx4

packages/dashboard/src/components/events/events-empty-state.tsx3

packages/dashboard/src/components/organizations/organization/organization-api-keys-table.tsx3

packages/dashboard/src/components/roles/roles-section.tsx3

packages/dashboard/src/legacy-pages/[environmentId]/api-logs/index.tsx3

packages/dashboard/src/legacy-pages/[environmentId]/directory-sync/connections/[directoryId]/groups.tsx3

packages/dashboard/src/legacy-pages/[environmentId]/directory-sync/connections/[directoryId]/users/index.tsx3

/:environmentId/applications

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/applications-table.tsx4

Show 23 more files

Empty State

Props

EmptyState.Action

asChild

color

ghost

highContrast

loading

radius

size

state

type

EmptyState.Subtitle

align

as

asChild

color

highContrast

size

trim

truncate

weight

wrap

EmptyState.Title

align

as

asChild

color

highContrast

size

trim

truncate

weight

wrap

Usage

Basic

With Icon

With Subtitle

Sizes

Examples

With Children

With Action Button

With a Custom Title

Variants

Dashboard

Context

Full API Reference

Full API Reference

EmptyState.Action

EmptyState.Subtitle

EmptyState.Title

Deprecated1

Deprecated

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`asChild`

`color`

`ghost`

`highContrast`

`loading`

`radius`

`size`

`state`

`type`

`align`

`as`

`asChild`

`color`

`highContrast`

`size`

`trim`

`truncate`

`weight`

`wrap`

`align`

`as`

`asChild`

`color`

`highContrast`

`size`

`trim`

`truncate`

`weight`

`wrap`