Misc / Empty

Empty

<Empty />Stable

A zero-state for any list, table, or search that returns nothing. Built by composing a TextBlock (its tonal icon + heading + body, as-is) with an EmptyActions row — one primary action, or a primary + outline secondary. The action is what unblocks the user, so keep it.

import { Empty, EmptyActions, TextBlock, TextBlockHeading, TextBlockBody } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Icon

Icon tone

Text size

Actions

No recruits yet

Drop a Hudl export onto the dashboard, or add one manually.

1<Empty>
2  <TextBlock variant="lg" align="center" iconPlacement="top" iconName="Inbox" iconTone="neutral">
3    <TextBlockHeading>No recruits yet</TextBlockHeading>
4    <TextBlockBody>Drop a Hudl export onto the dashboard.</TextBlockBody>
5  </TextBlock>
6  <EmptyActions>
7    <Button>Add recruit</Button>
8  </EmptyActions>
9</Empty>

Patterns

The icon, heading, and body are a TextBlock — same icon square and type ladder as Dialog, Alert, and the rest. Pair it with one action or two.

No recruits yet

Drop a Hudl export onto the dashboard, or add one manually to get started.

1import { Empty, EmptyActions, TextBlock, TextBlockHeading, TextBlockBody, Button } from "@/components/upnext";
2
3{/* icon + heading + body come from TextBlock as-is; one primary action */}
4<Empty>
5  <TextBlock variant="lg" align="center" iconPlacement="top" iconName="Inbox" iconTone="neutral">
6    <TextBlockHeading>No recruits yet</TextBlockHeading>
7    <TextBlockBody>Drop a Hudl export onto the dashboard, or add one manually.</TextBlockBody>
8  </TextBlock>
9  <EmptyActions>
10    <Button><FilePlus data-icon="inline-start" /> Add recruit</Button>
11  </EmptyActions>
12</Empty>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.