{
  "title": "Alert",
  "description": "Inline status banner with icon, title, description, and optional dismiss.",
  "url": "/docs/components/alert",
  "since": "0.2.0",
  "tags": [
    "feedback"
  ],
  "platform": "both",
  "source": "---\ntitle: Alert\ndescription: Inline status banner with icon, title, description, and optional dismiss.\nsince: 0.2.0\ntags: [feedback]\nplatform: both\ncategory: feedback\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Alert\" />\n\n## At a glance\n\n- Use Alert for messages the reader should *notice* but doesn't need to act on right away. Reach for [Dialog](/docs/components/dialog) when the user must acknowledge before continuing.\n- `role=\"alert\"` is set automatically so screen readers announce the message.\n- The Alert never tracks dismissed state itself — the parent decides what to render after `onDismiss` fires.\n\n## Preview\n\n<Preview name=\"alert-basic\" />\n\n## `tone`\n\nSeverity. Drives the color treatment and the default icon picked from\n`SemanticIconsProvider`.\n\n| Value       | Default icon | Use for                                        |\n|-------------|--------------|------------------------------------------------|\n| `info` (default) | info icon | Neutral context — \"FYI\", new feature notes |\n| `success`   | check        | Confirmations after an action                  |\n| `warning`   | warning      | Recoverable issues — slow network, retry hints |\n| `danger`    | error        | Failures, destructive consequences             |\n\n```tsx\n<Alert tone=\"warning\" title=\"Connection unstable\" />\n```\n\n## `title` and `description`\n\n`title` renders bold; `description` renders below as muted body copy.\nEither is optional; an Alert with only a `title` reads as a single-line\nbanner.\n\n```tsx\n<Alert tone=\"info\" title=\"Payment in review\" />\n<Alert tone=\"info\" title=\"Payment in review\" description=\"We'll email you within 24 hours.\" />\n```\n\n## `icon`\n\nBy default the Alert pulls the icon for its `tone` from the active\n`SemanticIconsProvider`. Pass `icon` to override per-instance with any\nicon component matching `{ size?: number; color?: string }`.\n\n```tsx\nimport { Sparkles } from 'lucide-react-native';\n\n<Alert tone=\"info\" icon={Sparkles} title=\"New feature\" />\n```\n\nPass `icon={null}` to render no icon at all.\n\n## `onDismiss`\n\nWhen provided, a close button renders in the top-right and fires\n`onDismiss` on press. The Alert never hides itself — the parent owns\nthat state.\n\n```tsx\nconst [shown, setShown] = useState(true);\n{shown ? <Alert tone=\"info\" title=\"Heads up\" onDismiss={() => setShown(false)} /> : null}\n```\n\n## Props\n\n<PropsTable component=\"Alert\" />\n"
}