EmptyStateCard
V 1.0View in Storybook
Empty-state card with illustration, heading, description and primary/secondary actions.
Playground
URL
https://design-system-ashu.vercel.app/iframe.html?id=components-emptystatecard--playground&viewMode=story&args=type%3Ano-result%3BshowPrimaryButton%3A%21true%3BshowSecondaryButton%3A%21true%3Btitle%3A%3Bdescription%3A%3BprimaryLabel%3A%3BsecondaryLabel%3ACode
<EmptyStateCard type="no-result" showPrimaryButton showSecondaryButton />Props
| Name | Type | Default |
|---|---|---|
type | 'no-result' | 'error' | 'no-data' | 'no-result' |
showPrimaryButton | boolean | true |
showSecondaryButton | boolean | true |
title | string | — |
description | string | — |
primaryLabel | string | — |
secondaryLabel | string | — |
Usage guidelines
When to use
- Use to fill zero-data screens — first-time onboarding, empty lists, search with no results.
- Choose the type that matches the context: no-result for filtered lists, error for failures, no-data for truly empty states.
- Always include at least one action button to guide the user toward the next step.
When not to use
- Don't use as a loading placeholder — use a skeleton screen instead.
- Avoid vague copy like "Nothing here" — explain why and what the user can do.
- Don't show an empty state when data is still loading.