Storybook stories for the `Alert` UI component, showcasing all available variants and a real-world usage example.
## Key Components
| Export | Variant | Description |
|---|---|---|
| `Default` | `default` | Neutral informational alert |
| `Destructive` | `destructive` | Error state alert (e.g. session expired) |
| `Warning` | `warning` | Caution state alert |
| `EmailVerification` | `warning` | Real-world example mirroring the Settings page email-verification banner |
| `AllVariants` | — | Renders all three variants stacked for visual comparison |
## Usage Example
```typescript
import { Alert, AlertDescription, AlertTitle } from '../components/ui/alert';
// Basic usage
Heads up!You can add components to your app using the CLI.
// With icon and custom layout (email verification banner pattern)
import { AlertTriangleIcon } from '../components/icons-v2-generated/interface/alert-triangle-icon';
Verify your email to keep access to system.
```
## Notes
- The `variant` prop accepts `'default'`, `'destructive'`, or `'warning'` and is controlled via a Storybook `select` control.
- `EmailVerification` is pinned to the `warning` variant and demonstrates composing `Alert` with an icon, bold message text, and an inline action button — matching the Figma design for the Settings page banner.
- Source: [`Alert.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/Alert.stories.tsx)