Alert
An urgent, persistent message that does not move focus or dismiss itself.@gemologic/sheen · feedbackPlayground
Save failed
Your draft is retained. Try saving again.
<Alert heading="Save failed" tone="danger">Your draft is retained. Try saving again.</Alert>Variant matrix
Alert composition
Save failed
Your draft is retained. Try saving again.
tone: info
Save failed
Your draft is retained. Try saving again.
tone: success
Save failed
Your draft is retained. Try saving again.
tone: warning
Save failed
Your draft is retained. Try saving again.
tone: danger
Save failed
Your draft is retained. Try saving again.
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Notice.tsx- Tokens
--sheen-color-info-subtle--sheen-color-info-fg--sheen-color-focus-ring-offset
Accessibility
Role: alertKeyboard: No component-owned keysDo
- Use for dynamically appearing important information without stealing focus.
Do not
- Do not auto-dismiss an alert or focus it when it appears.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
tone | "info" | "success" | "warning" | "danger" | danger | Semantic notice role, independent of the accent preset. |
heading | string | — | Optional visible summary; does not change the document heading outline. |