# Vue Alert Component API

> Explore the API reference for the Vue Alert component and discover how to effectively utilize its props for customization.

## CAlert

```jsx
import { CAlert } from '@coreui/vue'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaCloseLabel` | `string` | `'Close'` | Sets the `aria-label` of the dismissible close button. |
| `color` | `Color` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `dismissible` | `boolean` | - | Optionally add a close button to alert and allow it to self dismisss. |
| `show` | `boolean` | `undefined` | The visibility of the alert. Bind it with `v-model:show` to hand control to the parent — the dismiss button then only emits `update:show` and nothing closes until the parent flips the value. Passed one-way it seeds the starting state and the alert keeps managing itself. |
| `theme` | `Color` | - | Sets the color context of the component to one of CoreUI’s themed colors. |
| `transition` | `boolean\|string` | `true` | Set how the alert animates as it is shown and hidden: `'fade'` fades it, `'size'` collapses its box as well, and `false` removes the animation. |
| `variant` | `string` | - | Set the alert variant to a solid. |
| `visible` | `boolean` | `undefined` | Toggle the visibility of alert component. |

### Events

| Name | Description |
| --- | --- |
| `close` | Event fired when the component requests to be closed. |
| `closed` | Event fired after the alert has been closed and the CSS transition has completed. |
| `update:show` | Emit the requested visibility to support the `v-model:show` binding. |

## CAlertHeading

```jsx
import { CAlertHeading } from '@coreui/vue'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `string` | `'h4'` | Component used for the root node. Either a string to use a HTML element or a component. |

## CAlertLink

```jsx
import { CAlertLink } from '@coreui/vue'
```