Empty State

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 a 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="sm">
  <EmptyState.Image src="/assets/images/empty-state-demo.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>

API Reference