Components Feedback
EmptyState
StableExplains why an area is empty and offers the next step.
Use EmptyState for first-run screens, empty search results and cleared filters. Say what would normally be here, why it is empty, and give one clear action. Keep the tone helpful and brief.
Overview
No signature templates yet
Create a template to give everyone in your organisation a consistent, on-brand signature.
import { Button, EmptyState, Icon } from '@bindshq/stance-react';
export function Basic() {
return (
<EmptyState
icon={<Icon name="pen-nib" />}
title="No signature templates yet"
description="Create a template to give everyone in your organisation a consistent, on-brand signature."
action={<Button leadingIcon={<Icon name="plus" />}>Create template</Button>}
secondaryAction={<Button variant="ghost">Browse gallery</Button>}
/>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
No signature templates yet
Create a template to give everyone in your organisation a consistent, on-brand signature.
No signature templates yet
Create a template to give everyone in your organisation a consistent, on-brand signature.
No signature templates yet
Create a template to give everyone in your organisation a consistent, on-brand signature.
Import
import { EmptyState } from '@bindshq/stance-react';Platforms
EmptyState has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.
import { EmptyState } from '@bindshq/stance-react';Examples
No contracts match these filters
Try removing a filter or searching for a different counterparty.
import { Button, EmptyState, Icon } from '@bindshq/stance-react';
export function NoResults() {
return (
<EmptyState
icon={<Icon name="search" />}
title="No contracts match these filters"
description="Try removing a filter or searching for a different counterparty."
action={<Button variant="outline">Clear filters</Button>}
/>
);
}No notifications
You’re all caught up.
No users imported
Upload a CSV to add people in bulk.
import { Button, EmptyState, Icon } from '@bindshq/stance-react';
export function Sizes() {
return (
<div
style={{
display: 'grid',
gap: 16,
gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
}}
>
<EmptyState
size="sm"
bordered
icon={<Icon name="inbox" />}
title="No notifications"
description="You’re all caught up."
/>
<EmptyState
size="sm"
bordered
icon={<Icon name="upload" />}
title="No users imported"
description="Upload a CSV to add people in bulk."
action={<Button size="sm">Upload CSV</Button>}
/>
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* required | ReactNode | None | Short headline. |
description | ReactNode | None | One or two sentences of explanation. |
icon | ReactNode | None | Decorative icon or illustration. |
action | ReactNode | None | Primary action. |
secondaryAction | ReactNode | None | Secondary action. |
size | 'sm' | 'md' | 'lg' | 'md' | Spacing and type scale. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Heading level of the title. |
bordered | boolean | false | Dashed border around the area. |
Accessibility
- The title is a real heading; set headingLevel to fit the surrounding outline.
- The icon is decorative and hidden from assistive technology.
- When results empty out after filtering, pair this with a live results count (see FilterBar) so the change is announced.
Usage guidelines
Do
- Offer the action that fills the space.
- For no results, suggest clearing filters.
Don’t
- Blame the user or use jokes in error-adjacent states.