Empty State

Empty states are messages that appear whenever an element has no content to display to the user. They are opportunities to educate, drive engagement, or inform the user about issues on our or their end. Your empty states should never actually feel empty. For additional design guidelines refer to our Empty State Pattern page.

The EmptyState component presents an error or no content message to the user in a readable and detailed way.

This component has two main size options, small and large. You can use large for a page or somewhere you have a bigger content area. If you have a smaller content area, containers, tiles and so on, then small is the way to go.

Empty States must contain an icon and a body text. These are the main elements that define it's functionality. In addition to those properties, it can also have optional headline, hint text and a button.```

Icons:

• There are two icon elements: background and iconKey. The bigger illustration is the background, and smaller is iconKey
• The background element represents an abstract version of the empty user interface (as if it was not empty).
• The iconKey element represents a semantic state: error, warning etc.

Example

Live Editor

<EmptyState background="table" iconKey="warningOverload" size="large" headLine="Connection has been lost" bodyText="Data could not be loaded, or connection is missing." />

<EmptyState
  background="table"
  iconKey="warningOverload"
  size="large"
  headLine="Connection has been lost"
  bodyText="Data could not be loaded, or connection is missing."
/>

Result

Loading...

Variants

Body Text & Hint

The bodyText and hint props let you set the component's body text and hint messages.

Live Editor

<EmptyState background="graph" iconKey="error" bodyText="Please check your internet connection, or disabled browser plugins like AdBlock." hint="Hint: Check your connection, or disabled browser plugins." size="large" />

<EmptyState
  background="graph"
  iconKey="error"
  bodyText="Please check your internet connection, or disabled browser plugins like AdBlock."
  hint="Hint: Check your connection, or disabled browser plugins."
  size="large"
/>

Result

Loading...

Body Text, Hint & Button

If you want to display a button in the component, you must use the buttonLabel and onClickButton props. Additionally, you can display an icon inside the button using the buttonIconName and buttonIconAlignment props, or set the button kind using 'buttonKind'.

Live Editor

function EmptyStateComponent() { const EmptyStateRenderer = () => { const openSnackbar = useContext(SnackbarContext); return ( <EmptyState background="networks" iconKey="warningGeneral" size="large" bodyText="Please check your internet connection, or disabled browser plugins like AdBlock." hint="Hint: Check your connection, or disabled browser plugins." buttonLabel="Retry" buttonIconName="ArrowCircleRight" buttonIconAlignment="left" onClickButton={() => { openSnackbar({ title: 'Sample button clicked', kind: 'positive' }); }} /> ); }; return ( <SnackbarProvider offsetTop={76}> <EmptyStateRenderer /> </SnackbarProvider> ); }

function EmptyStateComponent() {
  const EmptyStateRenderer = () => {
    const openSnackbar = useContext(SnackbarContext);

    return (
      <EmptyState
        background="networks"
        iconKey="warningGeneral"
        size="large"
        bodyText="Please check your internet connection, or disabled browser plugins like AdBlock."
        hint="Hint: Check your connection, or disabled browser plugins."
        buttonLabel="Retry"
        buttonIconName="ArrowCircleRight"
        buttonIconAlignment="left"
        onClickButton={() => {
          openSnackbar({
            title: 'Sample button clicked',
            kind: 'positive'
          });
        }}
      />
    );
  };

  return (
    <SnackbarProvider offsetTop={76}>
      <EmptyStateRenderer />
    </SnackbarProvider>
  );
}

Result

Loading...

Body Text with Rich Text and Button

The bodyText props now accepts <b>,<i>, <a> and <strong> tags.

Also button variants can be accessed using buttonKind prop.

Live Editor

<EmptyState background="graph" iconKey="error" bodyText="You can make use of rich text in Empty States, such as <i>italic</i>, <strong>bold</strong>, or <a href='#'>links</a>." size="large" buttonLabel="Retry" buttonIconName="ArrowCircleRight" buttonIconAlignment="left" onClickButton={() => { openSnackbar({ title: 'Sample button clicked', kind: 'positive' }); }} />

<EmptyState
  background="graph"
  iconKey="error"
  bodyText="You can make use of rich text in Empty States, such as <i>italic</i>, <strong>bold</strong>, or <a href='#'>links</a>."
  size="large"
  buttonLabel="Retry"
  buttonIconName="ArrowCircleRight"
  buttonIconAlignment="left"
  onClickButton={() => {
    openSnackbar({
      title: 'Sample button clicked',
      kind: 'positive'
    });
  }}
/>

Result

Loading...

Body Text and Dropdown Button

The button can have dropdown menu by passing items array to buttonDropDownItems prop. You can find all available props for item type in ActionMenu component.

Live Editor

<EmptyState background="apps" iconKey="add" bodyText="Description" size="large" buttonKind="primary" buttonLabel="Add new item" buttonIconName="Plus" buttonIconAlignment="left" buttonDropDownItems={[ { label: 'some title', description: 'some description', onClick: () => console.log('clicked!'), iconName: 'Bell', }, { label: 'some other title', description: 'some other description', onClick: () => console.log('clicked!'), iconName: 'Star', } ]} />

<EmptyState
  background="apps"
  iconKey="add"
  bodyText="Description"
  size="large"
  buttonKind="primary"
  buttonLabel="Add new item"
  buttonIconName="Plus"
  buttonIconAlignment="left"
  buttonDropDownItems={[
      {
            label: 'some title',
            description: 'some description',
            onClick: () => console.log('clicked!'),
            iconName: 'Bell',
      },
      {
            label: 'some other title',
            description: 'some other description',
            onClick: () => console.log('clicked!'),
            iconName: 'Star',
      }
   ]}
/>

Result

Loading...

Props

Name	Type	Default
iconKey * Use this prop for setting key icon	"filter" | "payment" | "locked" | "pause" | "play" | "add" | "error" | "new" | "noAccess" | "noData"...	—
background * Use this prop for setting background icon	"table" | "rules" | "card" | "apps" | "graph" | "networks" | "account" | "analysis" | "mobile" | "smart-banner"	—
bodyText * The body text	string	—
headLine The headline text	string	—
hint The hint text	string	—
buttonLabel The label of the Button	string	—
buttonKind Use this props for changing button's kind	"negative" | "primary" | "secondary" | "tertiary" | "dark" | "floating" | "feedback-info-primary" | ...	"secondary"
buttonIconName The icon name of the Button	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
buttonIconAlignment Use this prop for button's icon alignment	"left" | "right"	—
buttonDataTestId The data-testid value for the Button	string	—
buttonDropDownItems Array of menu items for the Button. See the structure of the ItemType in ActionMenu component: Link	ItemType[]	—
onClickButton Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
size Use this prop for setting the component's size.	"small" | "large"	"large"
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

;