# Empty

Fills a region that has nothing to show yet.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Empty.tsx)

## Overview

Empty is a centered placeholder for a region with nothing to show yet, such as an empty list or search.

Explain why the area is empty and what to do next.

## Examples

### Basic

```tsx
import { Button, Empty } from '@tempoxyz/ds'
import { Clipboard } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <Empty.Root>
      <Empty.Icon>
        <Clipboard />
      </Empty.Icon>
      <Empty.Title>No activity yet</Empty.Title>
      <Empty.Description>Transactions will appear here once you send or receive.</Empty.Description>
      <Empty.Actions>
        <Button size="small">Refresh</Button>
        <Button size="small" variant="secondary">
          Learn more
        </Button>
      </Empty.Actions>
    </Empty.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Empty/Basic.tsx)

## Guidelines

TODO: Write guidelines for Empty.