amezquita design systemGet started

Patterns

EmptyState

Placeholder for zero-content states — icon, heading, supporting text, and an optional action

Markdown version for agents

Import
import { EmptyState } from '@amezquita/design-system/components/patterns/EmptyState'

Live render

No components match

Try a shorter search.

    Props

    PropTypeDescription
    icon?React.ReactNode
    titlestring
    description?string
    action?{ label: string; onClick: () => void; variant?: 'primary' | 'secondary' | 'ghost' }
    level?2 | 3 | 4 | 5 | 6
    compact?boolean
    className?string

    Tokens

    TokenTypeValue
    --emptystate-padding-xdimension64px
    --emptystate-padding-ydimension96px

    Usage example

    tsx
    <EmptyState
  icon={<SearchIcon />}
  title="No results found"
  description="Try adjusting your search or filters to find what you're looking for."
  action={{ label: 'Clear filters', onClick: () => {} }}
/>