# Empty

> A placeholder for a section that currently has nothing to show — a dashed-bordered panel that composes an icon, a title, a description, and an action into one empty-state layout.

```ts
import { Empty } from "@sdxc/ui";
```

Renders the empty-state panel: a dashed-bordered column tinted to the
color role in Empty.Props.color. Its compound parts inherit that
color through `currentcolor`.

## Examples

```tsx
<Empty>
	<Empty.Icon><InboxIcon /></Empty.Icon>
	<Empty.Title>{t("inbox.empty.title")}</Empty.Title>
	<Empty.Description>{t("inbox.empty.description")}</Empty.Description>
	<Empty.Action>
		<Button>{t("inbox.empty.action")}</Button>
	</Empty.Action>
</Empty>
```

```tsx
<Empty color="danger">
	<Empty.Title>{t("errors.notFound.title")}</Empty.Title>
</Empty>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone of the panel. Default: `"neutral"`. |
| `children` | `RemixNode` | The panel's compound parts: Empty.Icon, Empty.Title, Empty.Description, Empty.Action, or any other content. |

Also accepts everything in `TagProps<"div">`.


### Empty.Icon

Renders Empty.IconProps.children as the icon well: a fully rounded, tinted badge framing an icon graphic hidden from assistive technology, since Empty.Title's text already names the state.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Icon graphic rendered inside the icon well. |

Also accepts everything in `TagProps<"div">`.


### Empty.Title

Renders Empty.TitleProps.children as the empty state's heading, in the native heading element matching its ambient `HeadingScope` depth (or `<h1>` unscoped), sized as the panel's primary text regardless of level.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Heading copy for the empty state. |

Also accepts everything in `TagProps<"h1">`.


### Empty.Description

Renders Empty.DescriptionProps.children as the empty state's supporting copy, in a native `<p>` set to seventy percent of the panel's current text color so it reads as secondary to Empty.Title.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Supporting copy elaborating on the empty state. |

Also accepts everything in `TagProps<"p">`.


### Empty.Action

Renders Empty.ActionProps.children as the empty state's call-to-action slot: a centered, wrapping row spaced a touch below the text above it, so a state offering more than one action lays them out rather than running them together.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Call-to-action content, typically a button or link. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic tone driving the panel's border, tint, and foreground color through the `--ui-*` variables for that color. |