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.

No items found

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

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

API Reference

Root

Prop	Type	Default
`action`	`React.ReactNode`
`children`	`React.ReactNode`
`icon`	`React.ElementType`
`minHeight`	`number`
`size`	`"1" \| "2"`	`"2"`
`subtitle`	`string \| React.ReactElement`
`title`	`string \| React.ReactElement`

This component uses Flex internally. View source

Title

This component is a wrapper around the Text component and applies default styling for the title based on the configuration of the Root component. It inherits all props from the Text component. View source

Subtitle

This component is a wrapper around the Text component and applies default styling for the subtitle based on the configuration of the Root component. It inherits all props from the Text component. View source

Action

This component is a wrapper around the Button component and applies default styling for the action button based on the configuration of the Root component. It inherits all props from the Button component. View source

Examples

Basic

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

No results found

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

With Icon

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

No users have been created

 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.

No users

There are no users belonging to this organization.

 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.

No users

There are no users belonging to the SuperTeam organization.

 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.

No users have been created

 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.

Not permitted to perform this action

Please contact your administrator.

 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.

No users have been created

 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.

No origins match the term workos.com.

Edit your search term to find a match.

 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>
  );
}