# Empty: Heading level

> The title is a `<div>` so it never breaks your page outline. Render it as the heading level that fits, and label the region with it.

Example: https://hextaui.com/docs/empty/examples/heading
Component docs: https://hextaui.com/docs/empty.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/empty-heading.json
```

This adds `components/examples/empty/heading.tsx` with the Empty component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/empty/heading.tsx"
import { IconFileText } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

export function EmptyHeading() {
  return (
    <Empty render={<section aria-labelledby="drafts-empty-title" />}>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconFileText />
        </EmptyMedia>
        <EmptyTitle id="drafts-empty-title" render={<h3 />}>
          No drafts
        </EmptyTitle>
        <EmptyDescription render={<p />}>
          Drafts are saved automatically while you write.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button size="sm">Write a post</Button>
      </EmptyContent>
    </Empty>
  )
}
```

## Props in this example

### Empty

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` |  |

### EmptyMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "icon" \| "stack"` | `"default"` | icon puts an icon in a muted tile. stack raises the tile over two fanned cards that spread when the empty state is hovered. Both hide the media from assistive tech. |

### EmptyTitle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` | Render a heading, such as render={<h2 />}. |

### EmptyDescription

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<div>` | Plain links inside are underlined. Components rendered as links keep their own style. |

## More Empty examples

- [Entrance](https://hextaui.com/docs/empty/examples/transition.md)
- [Outline](https://hextaui.com/docs/empty/examples/outline.md)
- [Muted](https://hextaui.com/docs/empty/examples/muted.md)
- [Small](https://hextaui.com/docs/empty/examples/small.md)
- [Avatar](https://hextaui.com/docs/empty/examples/avatar.md)
- [Avatar group](https://hextaui.com/docs/empty/examples/avatar-group.md)
- [Image](https://hextaui.com/docs/empty/examples/image.md)
- [No search results](https://hextaui.com/docs/empty/examples/search-results.md)
- [In a card](https://hextaui.com/docs/empty/examples/in-card.md)
- [In a table](https://hextaui.com/docs/empty/examples/in-table.md)
- [In a popover](https://hextaui.com/docs/empty/examples/in-popover.md)
- [In a command list](https://hextaui.com/docs/empty/examples/in-command.md)
- [Long content](https://hextaui.com/docs/empty/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/empty/examples/rtl.md)