EmptyState

Interactive

See EmptyState in Storybook for every variant, with live controls.

What a list, table or panel shows when it has nothing in it.

import { EmptyState, Button } from "@kairosis/eidos";

<EmptyState
  title="No sources connected"
  description="Connect a source to start ingesting runs."
  action={<Button icon="plus">Connect a source</Button>}
/>;

Props

Prop	Type	Default	Description
`title`	`ReactNode`	—	Required
`icon`	`IconName`	`"inbox"`	Sits in a bordered circle
`description`	`ReactNode`	—	One short sentence
`action`	`ReactNode`	—	A single primary action

Guidelines

One sentence and one action. That's the whole pattern.
No illustrations of sadness, no apologies, no exclamation points. State the situation and offer the way out.
The description is capped at 320px so it stays readable and centred.
An empty state that offers no action is usually a filtered-results state — say so ("No results"), and let the user clear the filter.

Props​

Guidelines​

Props

Guidelines