# Empty: Long content

> Unbroken names and long addresses wrap inside the container, and long button labels truncate.

Example: https://hextaui.com/docs/empty/examples/long-content
Component docs: https://hextaui.com/docs/empty.md

## Add this example

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

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

## Source

```tsx title="components/examples/empty/long-content.tsx"
import { IconAlertTriangle } from "@tabler/icons-react"

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

export function EmptyLongContent() {
  return (
    <div className="w-full max-w-72">
      <Empty variant="outline" size="sm">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <IconAlertTriangle />
          </EmptyMedia>
          <EmptyTitle>
            Nothing found in
            averyveryverylongunbrokenworkspacenamethatkeepsgoing
          </EmptyTitle>
          <EmptyDescription>
            <p>
              We searched every folder shared with
              someone.with.a.really.long.address@example-company.com and found
              nothing.
            </p>
            <p>
              Check the <a href="#">sharing settings</a> or ask the owner for
              access.
            </p>
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="outline" size="sm" className="max-w-full">
            <span className="truncate">
              Request access from the workspace owner
            </span>
          </Button>
        </EmptyContent>
      </Empty>
    </div>
  )
}
```

## Props in this example

### Empty

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |  |
| `size` | `"default" \| "sm"` | `"default"` | sm tightens padding, gaps, the icon tile and the title. |

### 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. |

## 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)
- [Heading level](https://hextaui.com/docs/empty/examples/heading.md)
- [Right to left](https://hextaui.com/docs/empty/examples/rtl.md)