# Alert

> Source: https://design.nanatec.co.ke/components/alert/
> A contextual message banner for feedback, status and important notices. Supports an optional title, a leading status icon, action buttons and a dismiss control.

A contextual message banner for feedback, status and important notices. Supports an optional title, a leading status icon, action buttons and a dismiss control.

## Preview

```html
<nana-alert variant="info" open style="width:100%">Heads up — this is an informational alert.</nana-alert>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/alert";
```

## Basic usage

```html
<nana-alert variant="info" open style="width:100%">Heads up — this is an informational alert.</nana-alert>
```

## Variants

```html
<nana-alert variant="info" open style="width:100%">Info alert</nana-alert>
<nana-alert variant="success" open style="width:100%">Success alert</nana-alert>
<nana-alert variant="warning" open style="width:100%">Warning alert</nana-alert>
<nana-alert variant="danger" open style="width:100%">Danger alert</nana-alert>
<nana-alert variant="neutral" open style="width:100%">Neutral alert</nana-alert>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-close` | `CustomEvent` | Dispatched when the alert is dismissed |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The alert message / body content |
| `icon` | Custom leading icon (overrides the default variant icon) |
| `actions` | Action buttons shown beneath the message |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-alert-bg` | — | Custom background colour |
| `--nana-alert-color` | — | Custom text colour |
| `--nana-alert-border` | — | Custom border colour |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The alert container |
| `icon` | The leading status icon |
| `title` | The alert title |
| `message` | The alert message body |
| `actions` | The action buttons container |
| `close-button` | The dismiss button |

## Related components

<ul class="related not-content">
  <li><a href="/components/badge/">Badge</a></li>
  <li><a href="/components/skeleton/">Skeleton</a></li>
  <li><a href="/components/tag/">Tag</a></li>
  <li><a href="/components/spinner/">Spinner</a></li>
  <li><a href="/components/progress-bar/">Progress Bar</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-alert--docs