Empty State

View source Report an issue Edit this page

Empty states are messages that provide an explanation of an interface in absence of content.

EmptyState exports a number of components that can be composed together to create an EmptyState message. The message can include Title and/or Body and sometimes they appear together with an illustration and actionable buttons. There are 5 different size variants of EmptyState ( 'xs', 'sm', 'md', 'lg' and 'xl').


<EmptyState size="lg">
  <EmptyState.Image
    src="https://app.atomlearning.com/dist/29a378dc127c669808f2.svg"
    alt=""
  />
  <EmptyState.Title>No users found!</EmptyState.Title>
  <EmptyState.Body>
    You need to add some users before you can use this feature
  </EmptyState.Body>
</EmptyState><EmptyState size="lg">
  <EmptyState.Image
    src="https://app.atomlearning.com/dist/29a378dc127c669808f2.svg"
    alt=""
  />
  <EmptyState.Title>No users found!</EmptyState.Title>
  <EmptyState.Body>
    You need to add some users before you can use this feature
  </EmptyState.Body>
</EmptyState>
Edit me!

API Reference

Prop	Type	Default	Required
`size`	`"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"`	`sm`	-
`css`	`CSSProperties`	-	-