Empty State

Empty State is used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation, guidance or a call to action to help users progress.

Import

import { EmptyState } from '@outfitio/outkit';

Usage

Empty state with multiple actions

Accessibility

• Empty state illustrations are decorative images, so should use a null alt attribute (alt="").

Best Practice

Empty states should:

• Use simple and clear language
• Be encouraging and never make users feel unsuccessful or guilty because they haven’t used a product or feature
• Explain the steps users need to take to progress, using a CTA button where possible
• Use only one primary call-to-action button

Props

No custom props