Feedback

Notice

An inline message with an icon, a bold title, one sentence and an optional action, in success, error, warning, info or neutral.

Examples

Variants

Backup completed
42 repositories backed up in 4m 12s.
Worker lease expiring
Another machine may take over the backup-run lease in 5 minutes.
Index generation building
Semantic search keeps using the active generation until this one is ready.
<Notice variant="success" title="Backup completed">42 repositories backed up in 4m 12s.</Notice>
<Notice variant="error" title="Backup of anthropics/claude-code failed" action={<Button variant="outline" size="sm">Retry</Button>}>
  Bundle upload timed out after 30s. Retry or view the log.
</Notice>
<Notice variant="warning" title="Worker lease expiring">Another machine may take over the backup-run lease in 5 minutes.</Notice>
<Notice variant="info" title="Index generation building">Semantic search keeps using the active generation until this one is ready.</Notice>

Guidelines

  • The title states what happened; the body states the next step; at most one small button.
  • An error notice gets role="alert" automatically; the others are status.
  • Never stack more than two, never auto-dismiss an error, and use a dialog rather than a notice for a confirmation.

Props

PropTypeWhat it does
variant"neutral" | "success" | "error" | "warning" | "info"Picks the tint, the ink and the default icon.
title, children, action, iconReactNodeThe bold title, one sentence, one small button, an icon override (null hides it).