Vue Toast Component API

Toast API

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

On this page

jsx

import { CToast } from '@coreui/vue'

Property	Default	Type
animation	`true`	`boolean`
Apply a CSS fade transition to the toast.
autohide	`true`	`boolean`
Auto hide the toast.
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.
delay	`5000`	`number`
Delay hiding the toast (ms).
show6.0.0+	`undefined`	`boolean`
Control the visibility. When set, the toast renders what `show` says and internal gestures only emit `update:show` — nothing closes until the parent flips the prop. Supports the `v-model:show` binding.
theme6.0.0+	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
translucent6.0.0+	-	`boolean`
Let the background through the toast and blur it.
visibleDeprecated 6.0.0	`undefined`	`boolean`
Toggle the visibility of component. Use `show` / `v-model:show` instead — `visible` is ignored when `show` is set.

Event name
close
Callback fired when the component requests to be closed.
show
Callback fired when the component requests to be shown.
update:show
Emit the requested visibility to support the `v-model:show` binding.

jsx

import { CToastBody } from '@coreui/vue'

jsx

import { CToastClose } from '@coreui/vue'

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

Event name
close
Event called before the dissmiss animation has started.

jsx

import { CToastHeader } from '@coreui/vue'

Property	Default	Type
ariaCloseLabel5.10.0+	-	`string`
Sets the `aria-label` of the close button.
closeButton	-	`boolean`
Automatically add a close button to the header.