# Alert

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

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/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>
  );
}
```

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