EmptyState

Placeholder for empty lists or zero-data states with optional icon and action.

With icon and action

No alerts yet

Configure your first monitor to start receiving alerts.

import { EmptyState, Button } from '@canarist/ui'

<EmptyState
  icon={<InboxIcon />}
  title="No alerts yet"
  description="Configure your first monitor to start receiving alerts."
  action={<Button size="sm">Add monitor</Button>}
/>

Minimal

No results found

Try adjusting your search or filter.

<EmptyState
  title="No results found"
  description="Try adjusting your search or filter."
/>

Reference

Prop	Type	Default	Description
title	string	—	Main heading text.
description	string	—	Secondary descriptive text.
icon	ReactNode	—	Icon or illustration shown above the title.
action	ReactNode	—	Call-to-action element shown below the description.
className	string	—	Additional CSS classes.