Skip to content
Caps

blocks/empty-state

Type Aliases

Section titled “Type Aliases”

EmptyStateVariant

Section titled “EmptyStateVariant”

EmptyStateVariant = "plain" | "panel" | "speech" | "hint"

How an absence presents itself. plain leaves layout to the host; panel is a recessed, centered invitation; speech lets the visual (a mascot) say the copy from a molded speech bubble; hint is a quiet centered footnote under content, such as the next thing to try.

EmptyStateVisualState

Section titled “EmptyStateVisualState”

EmptyStateVisualState = Readonly<{ speaking: boolean; thinking: boolean; }>

What a visual is told while the EmptyState is on screen.

EmptyStateSuggestion

Section titled “EmptyStateSuggestion”

EmptyStateSuggestion = Readonly<{ label: string; onSelect: () => void; }>

A suggested next step, shown as a chip the host acts on.

EmptyStateProps

Section titled “EmptyStateProps”

EmptyStateProps = Omit<HTMLAttributes<HTMLElement>>, "title"> > & object

Props accepted by EmptyState.

Type Declaration

Section titled “Type Declaration”
actions?
Section titled “actions?”

optional actions?: ReactNode

description
Section titled “description”

description: ReactNode

suggestions?
Section titled “suggestions?”

optional suggestions?: readonly EmptyStateSuggestion[]

Chips that offer a starting point, such as a prompt to try.

thinking?
Section titled “thinking?”

optional thinking?: boolean

The host is working on something, such as creating what this state invites.

title
Section titled “title”

title: ReactNode

visual?
Section titled “visual?”

optional visual?: ReactNode

Static art.

renderVisual?
Section titled “renderVisual?”

optional renderVisual?: (state) => ReactNode

Render a visual from the current speaking and thinking state.

Parameters
Section titled “Parameters”
state
Section titled “state”

EmptyStateVisualState

Returns
Section titled “Returns”

ReactNode

variant?
Section titled “variant?”

optional variant?: EmptyStateVariant

Variables

Section titled “Variables”

EmptyState

Section titled “EmptyState”

const EmptyState: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>>, "title"> > & object & RefAttributes<HTMLElement>>>>

Product-neutral absence presentation; hosts supply copy, art, and actions.