104Get started
HextaUI

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.

No drafts

Drafts are saved automatically while you write.

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

Add this example

This adds the example as components/examples/empty/heading.tsx, together with the Empty component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/empty-heading.json

To add only the component, follow the Empty installation.

Props in this example

The Empty props this example sets, from the API reference.

Empty

PropTypeDefault
render
ReactElement | (props, state) => ReactElement<div>

EmptyMedia

PropTypeDefault
varianticon 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.
"default" | "icon" | "stack""default"

EmptyTitle

PropTypeDefault
renderRender a heading, such as render={<h2 />}.
ReactElement | (props, state) => ReactElement<div>

EmptyDescription

PropTypeDefault
renderPlain links inside are underlined. Components rendered as links keep their own style.
ReactElement | (props, state) => ReactElement<div>

Every prop is in the Empty API reference.

More Empty examples

See them all, with keyboard support and accessibility notes, on the Empty page.

Related components