# Alert

> Bootstrap's alert component built with Svelte 5. Use alerts to provide contextual feedback messages for typical user actions.

Source: https://bootstrap-svelte.vercel.app/components/alert — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

```html
<Alert colorVariant="primary">
  A simple primary alert—check it out!
</Alert>
```

## Alert Variants

Bootstrap includes several predefined alert styles for different contexts.

```html
<Alert colorVariant="primary">A simple primary alert—check it out!</Alert>
<Alert colorVariant="secondary">A simple secondary alert—check it out!</Alert>
<Alert colorVariant="success">A simple success alert—check it out!</Alert>
<Alert colorVariant="danger">A simple danger alert—check it out!</Alert>
<Alert colorVariant="warning">A simple warning alert—check it out!</Alert>
<Alert colorVariant="info">A simple info alert—check it out!</Alert>
<Alert colorVariant="light">A simple light alert—check it out!</Alert>
<Alert colorVariant="dark">A simple dark alert—check it out!</Alert>
```

## Dismissible Alerts

Make alerts dismissible by adding the `isDismissible` prop. This adds a close button to the alert and allows it to be closed by users.

```html
<Alert colorVariant="warning" isDismissible={true}>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</Alert>
```

## Additional Content

Alerts can contain additional HTML elements like headings, paragraphs and dividers.

```html
<Alert colorVariant="success">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</Alert>
```

## Icons

Add icons to your alerts to enhance visual appearance. You can use any icon library like Bootstrap Icons.

```html
<Alert colorVariant="primary">
  <i class="bi bi-info-circle-fill me-2" aria-hidden="true"></i>
  An example alert with an icon
</Alert>
```

## API Reference

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `colorVariant` | `string` | `'primary'` | Sets the alert's background color. Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'. |
| `isDismissible` | `boolean` | `false` | Adds a close button that allows users to dismiss the alert. |
| `isAnimated` | `boolean` | `true` | Enables the fade animation when the alert is shown or hidden. |
| `isOpen` | `boolean` | `true` | Controls the visibility of the alert. Can be bound using `bind:isOpen`. |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |

### Events

| Name | Type | Description |
| --- | --- | --- |
| `onClose` | `EventListener` | Fired when the alert is about to Close (at the start of the transition). |
| `onClosed` | `EventListener` | Fired when the alert has been fully Closed (after the transition is complete). |

### CSS Classes

The component applies Bootstrap's alert classes based on the provided props:

- `alert` - Always applied as the base class
- `{variant}` - Applied based on the variant prop
- `alert-dismissible` - Applied when isDismissible is true
- `fade` - Applied when isAnimated is true
- `show` - Applied when isOpen is true and isAnimated is true