EmptyState

Adding Empty states

Empty State

Complex Empty State

Including H4, Body1, Primary Button, Text Button

() => {
  return (
    <EmptyState
      header="This is an empty state."
      caption="Use it to provide information when no dynamic content exists. This might end up being two lines long sometimes."
      submitAction={{ name: 'Submit', onClick: () => { console.log("in Submit") } }}
      secondaryAction={{ name: 'Cancel', onClick: () => { console.log("in Cancel") } }}
    />
  );
};

Props

Prop	Type	Description
header	string	Displays the header text; optional.
caption	string	Displays the caption text; optional.
submitAction	object	The "name" key displays the label of the primary button. "onClick" handles the onClick event of submitAction. If "name" key is not provided, the default text displayed will be "Submit"; optional
secondaryAction	object	The "name" key displays the label of the secondary button. "onClick" handles the onClick event of secondaryAction. If "name" key is not provided, the default text displayed will be "Cancel"; optional

Including H4, Body1, Primary Button

() => {
  return (
    <EmptyState
      header="This is an empty state."
      caption="Use it to provide information when no dynamic content exists. This might end up being two lines long sometimes."
      submitAction={{ name: 'Submit', onClick: () => { console.log("in Submit") } }}
    />
  );
};

Including H4, Body1, No actions

() => {
  return (
    <EmptyState
      header="This is an empty state."
      caption="Use it to provide information when no dynamic content exists. This might end up being two lines long sometimes."
    />
  );
};

Simple Empty State

No results

() => {
  return (
    <EmptyState
      caption="We couldn’t find anyone who matched your search."
    />
  );
};

Directions for an action to be taken

() => {
  return (
    <EmptyState
      caption="Enter a name to search"
    />
  );
};