# Alert

> Inline status banner — info, success, warning, danger, neutral, offline.

Source: https://ngwr.dev/reference/components/alert  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrAlert } from 'ngwr/alert';

@Component({ imports: [WrAlert] })
export class MyComponent {}
```

## Basic usage

```html
<wr-alert title="Heads up" message="Your trial ends in 3 days." />
```

## Types

```html
<wr-alert title="Info" type="info" />
<wr-alert title="Success" type="success" />
<wr-alert title="Warning" type="warning" />
<wr-alert title="Danger" type="danger" />
<wr-alert title="Neutral" type="neutral" />
<wr-alert title="Offline" type="offline" />
```

## With title

Pair a `title` with a secondary `message`.

```html
<wr-alert title="Update available" message="Version 2.0 is ready to install." type="info" />
```

## Without title

Omit `title` and the `message` renders as a single primary line.

```html
<wr-alert message="Your changes are live." type="success" />
<wr-alert message="Connection lost." type="offline" />
```

## Custom icon

Override the default per-type icon with `iconName`.

```html
<wr-alert iconName="sparkles" title="What's new" message="Smarter search just landed." />
```

## Closable

```html
<wr-alert title="Saved" type="success" closable (closed)="onClose()" />
```

## Without icon

Pass `[icon]="false"` to suppress the leading status icon.

```html
<wr-alert title="Plain" message="No leading icon." [icon]="false" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `closeLabel` | Accessible name. Falls back to `alert.close`, then `'Close alert'`. | `string \| null` | `null` |
| `title` | Optional headline shown at the top of the alert. | `string \| null` | `null` |
| `type` | Visual variant. | `WrAlertType` | `'info'` |
| `iconName` | Override the default per-type icon with any ngwr icon name. | `WrIconName \| null` | `null` |
| `message` | Optional secondary message rendered below the title. | `string \| null` | `null` |
| `icon` | When `true`, renders a leading status icon matching the `type`. Pass `false` to hide. Ignored when `iconName` is set. | `boolean` | `true` |
| `closable` | When `true`, renders a close button. | `boolean` | `false` |
| `(closed)` | Emitted when the user dismisses the alert via the close button. | `void` | — |

## CSS variables

Custom properties `ngwr/alert` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-alert-bg` | `var(--wr-color-info-soft)` | `.wr-alert` +3 variant overrides |
| `--wr-alert-border` | `transparent` | `.wr-alert` |
| `--wr-alert-close` | `var(--wr-color-info)` | `.wr-alert` +3 variant overrides |
| `--wr-alert-message` | `var(--wr-color-on-surface)` | `.wr-alert` +2 variant overrides |
| `--wr-alert-title` | `var(--wr-color-info-ink)` | `.wr-alert` +3 variant overrides |