EmptyState
Use shorthand content for a simple placeholder, or compound members for custom layout and actions.
Source
LLM docs
Package
Examples
6
Properties
37
Basics
Use
icon, title, and description for a simple placeholder.Loading demo…
import { Block, EmptyState, Icon } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<EmptyState
icon={<Icon name="search" />}
title="No results"
description="Try a different search."
/>
</Block>
);
}Compound Content
Compound members let you add actions and expose the title as a heading.
Loading demo…
import { Block, Button, EmptyState, Icon } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<EmptyState>
<EmptyState.Indicator>
<Icon name="search" />
</EmptyState.Indicator>
<EmptyState.Title order={2}>Nothing here yet</EmptyState.Title>
<EmptyState.Description>Add your first item.</EmptyState.Description>
<EmptyState.Actions>
<Button>Add item</Button>
</EmptyState.Actions>
</EmptyState>
</Block>
);
}Indicator Variants
variant, color, and size change the indicator treatment and overall scale.Loading demo…
import { Block, EmptyState, Icon } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<EmptyState
icon={<Icon name="search" />}
title="No results"
variant="light"
color="primary"
size="lg"
/>
</Block>
);
}Alignment
align positions the indicator and text at the logical start or end.Loading demo…
import { Block, EmptyState, Icon } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<EmptyState
align="start"
icon={<Icon name="search" />}
title="No matches"
description="Try another filter."
/>
</Block>
);
}Indicator Background
withIndicatorBackground adds a neutral circle around the icon.Loading demo…
import { Block, EmptyState, Icon } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<EmptyState withIndicatorBackground icon={<Icon name="search" />} title="Nothing found" />
</Block>
);
}Sizes
size scales the indicator, spacing, and typography.Loading demo…
import { Block, EmptyState, Icon } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<EmptyState size="xs" icon={<Icon name="search" />} title="Small placeholder" />
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources