104Get started
HextaUI

Empty: Muted

variant="muted" sits on a soft fill. The icon tile switches to a raised white surface so it still stands out.

No notifications
You’re all caught up. New notifications will appear here.
import { IconBell } from "@tabler/icons-react"

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

export function EmptyMuted() {
  return (
    <Empty variant="muted">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <IconBell />
        </EmptyMedia>
        <EmptyTitle>No notifications</EmptyTitle>
        <EmptyDescription>
          You’re all caught up. New notifications will appear here.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button variant="outline" size="sm">
          Notification settings
        </Button>
      </EmptyContent>
    </Empty>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/empty-muted.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
variant
"default" | "outline" | "muted""default"

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"

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