# Alert

> Inline message with semantic colors, title, description, and dismiss action.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://www.sisyphosui.com/docs/components/alert
- WAI-ARIA pattern: [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { Alert } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { Alert } from "@sisyphos-ui/react";

export const Saved = () => (
  <Alert color="success" title="All set" description="Your settings have been saved." />
);
```

### Vue 3+

```vue
<script setup lang="ts">
import { Alert } from "@sisyphos-ui/vue";
</script>

<template>
  <Alert color="success" title="All set" description="Your settings have been saved." />
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { Alert } from "@sisyphos-ui/angular";

@Component({
  selector: "app-saved",
  standalone: true,
  imports: [Alert],
  template: `<sui-alert color="success" title="All set" description="Your settings have been saved." />`,
})
export class SavedComponent {}
```

## Examples

### Semantic colors

```tsx
import { Alert } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Alert color="info"    title="Heads up"          description="Scheduled maintenance starts in 1 hour." />
      <Alert color="success" title="Saved"             description="Your changes have been published." />
      <Alert color="warning" title="Almost full"       description="Your workspace is at 92% of its plan limit." />
      <Alert color="error"   title="Something went wrong" description="The upload was aborted." />
    </div>
  );
}
```

### Variants

```tsx
import { Alert } from "@sisyphos-ui/react";

export function Example() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Alert variant="contained" color="primary" title="Contained" description="Solid fill with contrasting text." />
      <Alert variant="outlined"  color="primary" title="Outlined"  description="Transparent background with a colored border." />
      <Alert variant="soft"      color="primary" title="Soft"      description="Subtle tinted background." />
    </div>
  );
}
```

### Real world — deployment banner

Alert inside a Card header, used to surface status over content.

```tsx
import { Alert, Button, Card } from "@sisyphos-ui/react";

export function DeploymentBanner() {
  return (
    <Card>
      <Card.Header>
        <Alert
          variant="soft"
          color="success"
          title="Deployment succeeded"
          description="Your changes are live at https://app.example.com."
        />
      </Card.Header>
      <Card.Body>
        <p>
          Next build will inherit this configuration. Review the diff to
          confirm the rollout window.
        </p>
      </Card.Body>
      <Card.Footer>
        <Button variant="text">View deployment</Button>
        <Button>Continue</Button>
      </Card.Footer>
    </Card>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | `"contained" \| "outlined" \| "soft"` | `"soft"` | Visual treatment. |
| color | `"primary" \| "success" \| "error" \| "warning" \| "info"` | `"info"` | Semantic color; also selects the default icon and the inferred ARIA role. |
| title | `ReactNode` | — | Alert heading. |
| description | `ReactNode` | — | Supporting copy rendered below the title. |
| icon | `ReactNode \| null` | — | Override the default semantic icon; pass `null` to hide it. |
| actions | `ReactNode` | — | Action slot (typically a `Button`). |
| onClose | `(event?: MouseEvent) => void` | — | When provided, renders the close button; also fires when `autoCloseDuration` elapses. |
| closeAriaLabel | `string` | `"Close"` | Accessible label for the close button. |
| autoCloseDuration | `number` | — | Auto-dismiss after this many ms; requires `onClose` to actually unmount the alert. |
| role | `string` | — | Override the inferred live-region role. |

## Accessibility notes

- The live-region role is inferred from `color`: `role="alert"` (assertive) when `color="error"`, `role="status"` (polite) otherwise — overridable via the `role` prop.
- The close button is a native `<button>` labeled through `closeAriaLabel` (defaults to `"Close"`).
- Default semantic icons are decorative SVGs marked `aria-hidden="true"` — the message text carries the meaning.

<!-- exports: { "Alert": "@sisyphos-ui/react" } -->