EmptyState
What a list, page or panel shows when it has nothing yet: an icon, a title, a line of help and the action that fills it.
Master
Turn the icon, description and actions on and off; outlined adds the border.
No invoices yet
Create an invoice or import them from a file.
Usage
Use EmptyState in place of content that isn't there yet: a list with no rows, a new account's first screen, a panel with nothing selected. It is one component: pass title, and add description, icon and actions as needed. icon shows in a round well above the title, or large and filled with iconStyle="plain"; media replaces it with a kit Avatar or AvatarGroup. actions holds kit Buttons, like one strong brand Create and a subtle Import. outlined adds a border and a card fill, for an empty region inside a page. See contracts/emptystate.json for the full contract.
Do's
- A list or table with no rows yet, or no results for a filter.
- A new account's first screen, or a panel with nothing selected.
Don'ts
- Do not invent EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription or EmptyContent. Pass props.
- Do not use it for page messages like errors or warnings. Use Callout.
- Do not use it while content is loading.
- Do not use raw hex.
<EmptyState
title="No invoices yet"
description="Create an invoice or import them from a file."
icon="receipt_long"
iconStyle="well"
actions={createActions}
headingLevel={3}
/>