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

PropTypeDefaultDescription
headerstringDisplays the header text; optional.
captionstringDisplays the caption text; optional.
submitActionobjectThe "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
secondaryActionobjectThe "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"
/>
);
};