Empty State

import { EmptyState, ConfirmationCard } from '@refraction-ui/react-empty-state'

export function MyComponent() {
  return (
    <EmptyState
      icon={<InboxIcon />}
      title="No messages yet"
      description="When you receive messages, they'll show up here."
      actions={<button>Compose</button>}
    />
  )
}

// ConfirmationCard is EmptyState with bordered defaulting to true
export function CheckEmail() {
  return (
    <ConfirmationCard
      icon={<MailIcon />}
      tone="success"
      title="Check your email"
      description={<>We sent a sign-in link to <strong>jane@example.com</strong>.</>}
    />
  )
}