# Empty

- **the element**: `<div>` on `empty`
- **its own props**: `icon`, `title`, `description`, `element`, children as the actions
- **size**: 
- **example**: `empty`

From the [Display](/docs/packages/ui#display) section of [`@aweftjs/ui`](/docs/packages/ui).

## Example

Every state, type and size, rendered in light and dark from [`recipes/ui/examples/empty.example.tsx`](/docs/recipes/ui/files/examples/empty.example.tsx):

```tsx
// Empty: everything it takes, and the same thing with only a title.

import { Button, Empty, Icon, h } from '@aweftjs/ui';

import { ids } from '../example.ts';
import type { ExampleComponent } from '../example.ts';

export const name = 'Empty';
export const order = 63;

export const Example: ExampleComponent = (props) => {
	const at = ids(props.mode);

	return (
		<div theme="column">
			<Empty
				icon={<Icon name="lucide:inbox" />}
				title="No messages"
				description="Anything sent to this address will show up here."
				id={at('empty')}
			>
				<Button label="Refresh" type="quiet" size="sm" id={at('empty-refresh')} />
			</Empty>

			<Empty title="Nothing to see" id={at('empty-bare')} />
		</div>
	);
};
```