Vue Alert Component API

Alert API

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

On this page

jsx

import { CAlert } from '@coreui/vue'

Property	Default	Type
ariaCloseLabel5.10.0+	`'Close'`	`string`
Sets the `aria-label` of the dismissible close button.
colorDeprecated 6.0.0	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors. Use `theme` instead — `color` renders the same `theme-{color}` class and loses to `theme` when both are set.
dismissible	-	`boolean`
Optionally add a close button to alert and allow it to self dismisss.
show6.0.0+	`undefined`	`boolean`
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.
theme6.0.0+	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
transition5.10.0+	`true`	`boolean`, `string`
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.
visibleDeprecated 6.0.0	`undefined`	`boolean`
Toggle the visibility of alert component. Use `show` / `v-model:show` instead — `visible` is ignored when `show` is set.

Event name
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.

jsx

import { CAlertHeading } from '@coreui/vue'

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

jsx

import { CAlertLink } from '@coreui/vue'