# 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>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
</script>

<template>
  <Alert variant="info">
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      A simple alert with an "AlertTitle" and an "AlertDescription".
    </AlertDescription>
  </Alert>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add alert --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add alert --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add alert --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<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>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
</script>

<template>
  <Alert variant="info">
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      A simple alert with an "AlertTitle" and an "AlertDescription".
    </AlertDescription>
  </Alert>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Composition

Use this structure for an alert with a title and supporting text:

```text
Alert
├── Icon
├── AlertTitle
└── AlertDescription
```

## Icon

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

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
import { IconFlame as Flame } from "@tabler/icons-react";

export function Example() {
  return (
    <>
      <Alert variant="error">
        <AlertTitle><Flame />Danger!</AlertTitle>
        <AlertDescription>
          This action is destructive and may have unintended consequences.
        </AlertDescription>
      </Alert>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
import { IconFlame as Flame } from "@tabler/icons-vue";
</script>

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

## Variants

<FrameworkCodeSwitcher>
  <div slot="astro">
```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>
```
  </div>
  <div slot="react">
```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";

export function Example() {
  return (
    <>
      <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>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@/components/starwind/alert";
</script>

<template>
  <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>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## 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.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### 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.