# Alert

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
---

<Alert variant="info">
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
```
  </div>
  <div slot="react">
```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";

export function Example() {
  return (
    <Alert variant="info">
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        A simple alert with an "AlertTitle" and an
        "AlertDescription".
      </AlertDescription>
    </Alert>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add alert
```

## Usage

### icon

You can add any svg icon inside the `<AlertTitle>` component and it will be automatically styled.

```astro
---
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
import Flame from "@tabler/icons/outline/flame.svg";
---

<Alert variant="error">
  <AlertTitle><Flame />Danger!</AlertTitle>
  <AlertDescription>
    This action is destructive and may have unintended consequences.
  </AlertDescription>
</Alert>
```

### variant

```astro
---
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
---

<Alert variant="default">
  <AlertTitle>variant="default"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="primary">
  <AlertTitle>variant="primary"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="secondary">
  <AlertTitle>variant="secondary"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="info">
  <AlertTitle>variant="info"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="success">
  <AlertTitle>variant="success"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="warning">
  <AlertTitle>variant="warning"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
<Alert variant="error">
  <AlertTitle>variant="error"</AlertTitle>
  <AlertDescription>
    A simple alert with an "AlertTitle" and an
    "AlertDescription".
  </AlertDescription>
</Alert>
```

## Framework Availability
Alert is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Alert
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `variant` | `"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "error"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits div attributes.

### AlertTitle
- Inherits h5 attributes.

### AlertDescription
- Inherits p attributes.

## Changelog

### v1.4.0

- Added contract-generated Astro and React implementations while preserving the component's existing public API and styling.

### v1.3.2 

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.3.0 

- style and focus state updates

### v1.2.0

- Add a `data-slot` attribute to all components to enable global styling updates
- add `role="alert"` and other small accessibility improvements

### v1.1.1

- Adjust component to use type `VariantProps` from `tailwind-variants`. This provides greater type safety and cleans up component frontmatter.

### v1.1.0

- `tailwind-variants` now implemented. This uses `tailwind-merge` under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the "class" prop.