Empty

An Empty with no props shows the default illustration and the text "No data".

Set image to Empty.PRESENTED_IMAGE_SIMPLE for a smaller illustration that fits cards, table bodies and dropdowns.

Set accent to "primary" to draw any illustration in the theme's primary shades instead of grays.

Set appearance to "filled" to fill the shapes with a light tint, which turns primary with accent="primary".

Set backdrop to "floor" (the default), "grid", "rings" or "none" to choose the faint pattern behind the illustration.

Switch appearance, accent and backdrop to see how they combine on a few illustrations.

Every illustration the kit ships, each with the empty state it fits, like a bell for notifications.

Pass description your own text, or false to show the illustration alone.

Put buttons in children to offer the next step, with the main action on the right, and pass image an illustration that fits the content.

Use default-colored buttons when the empty state sits in a quiet part of the page, outlined for the main action and text for the other.

Select, Table and other data components already show a compact Empty when they have nothing to list, so you rarely add one yourself.

Set locale.emptyText on a single Table to give it its own empty state, which wins over renderEmpty.

A search that matches nothing shows an Empty with a button that clears the filter.