Components / Status and feedback

Status and feedback

Explore every variant and expand each example’s formatted usage code.

Status and feedback

Badges, alerts, loading states and helpful empty content.

Badges

Draft12Needs attention

<Badge>Draft</Badge>
<CountBadge count={12} label="12 tasks" />
<StatusBadge tone="warning" label="Needs attention" />

Alerts

Changes saved

A value needs attention

Review the highlighted field and try again.

<Alert tone="success" icon={<SvgIcon svg={alertCheckIcon} />}>
  Changes saved
</Alert>
<Alert
  tone="danger"
  icon={<SvgIcon svg={alertWarningIcon} />}
  title="A value needs attention"
  description="Review the highlighted field and try again."
/>

Activity panel

Project saved

<FeedbackPanel
  title="Activity"
  ariaLabel="Activity"
  items={[{ id: 'saved', title: 'Project saved', tone: 'success' }]}
/>

Spinner

<Spinner label="Loading preview" />

Loading overlay

Loading content placeholder

<LoadingOverlay busy label="Loading content">
  <Panel>Loading content placeholder</Panel>
</LoadingOverlay>

Empty state

No results

Try changing your filters.

<EmptyState
  title="No results"
  description="Try changing your filters."
/>