# Alert (w-alert)

## Description

Alert is an inline component used for displaying different types of messages.

[Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)

## Usage

Alert is an inline component used for displaying different types of messages.

Use alerts for contextual feedback that appears close to the related UI element or action.

### Basic Alert

```html
<w-alert show>
  We have updated your preferences.
</w-alert>
```

### Variants

Choose a variant that matches message severity:

- `info`: neutral information
- `positive`: confirmation/success
- `warning`: caution
- `negative`: errors or critical issues

```html
<w-alert variant="info" show>Informational message</w-alert>
<w-alert variant="positive" show>Your changes were saved</w-alert>
<w-alert variant="warning" show>Double-check this value before continuing</w-alert>
<w-alert variant="negative" show>Something went wrong</w-alert>
```

### Visibility

Alerts are hidden by default. Set `show` to display them.

```html
<w-alert id="profile-alert" variant="positive">Profile saved</w-alert>

<script type="module">
  const alert = document.querySelector('#profile-alert');
  alert.show = true;
</script>
```

## Accessibility

For accessibility reasons, an alert should appear close to the element that triggered it.

Use the ARIA live region `role` attribute to provide meaning to the alert
element (defaults to "alert").

If you want to remove the role from the alert and
assign it to its particular child (e.g. title), you can do so by setting `role`
property of the `Alert` component to an empty string and assigning a respective
`role` attribute on the child element.

<elements-example>
  
```html
<w-alert variant="info" show role="">
  <h3 role="alert" class="t5">This is an alert styled as an information box</h3>
  <p>In this example only the title has the role of alert. All alerts can have a description.</p>
</w-alert>
```

</elements-example>

Read more about live region `role`
attribute on [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes).

## Examples

### Basic

<elements-example>
  
```html
<w-alert show>
  <p>We have updated your preferences.</p>
</w-alert>
```

</elements-example>

### Info

<elements-example>
  
```html
<w-alert variant="info" show>
  <p>This is an informational alert.</p>
</w-alert>
```

</elements-example>

### Warning

<elements-example>
  
```html
<w-alert variant="warning" show>
  <p>Please double-check this value before continuing.</p>
</w-alert>
```

</elements-example>

### Negative

<elements-example>
  
```html
<w-alert variant="negative" show>
  <p>Something went wrong. Try again.</p>
</w-alert>
```

</elements-example>

### Positive

<elements-example>
  
```html
<w-alert variant="positive" show>
  <p>Your changes were saved successfully.</p>
</w-alert>
```

</elements-example>

### Programmatic Visibility

```html
<w-alert id="profile-alert" variant="positive">
  <p>Profile saved</p>
</w-alert>

<script type="module">
  const alert = document.querySelector('#profile-alert');
  alert.show = true;
</script>
```

## Styling API

## `<w-alert>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| role | `string` | `"alert"` | ARIA role announced to assistive technology. |
| show | `boolean` | `false` | Whether the alert is visible. |
| variant | [`AlertVariants`](#alertvariants) | `"info"` | Visual style of the alert. |

### Property Details

#### role



- Type: `string`
- Default: `"alert"`

#### show



- Type: `boolean`
- Default: `false`

#### variant



- Type: [`AlertVariants`](#alertvariants)
- Default: `"info"`

### Types

#### AlertVariants

`'negative' | 'positive' | 'warning' | 'info'`