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-pro'

Property	Default	Type
autohide	`true`	`boolean`
Auto hide the toast.
color	-	`Color`
Sets the color context of the component to one of CoreUI’s themed colors.
delay	`5000`	`number`
Delay hiding the toast (ms).
dismissible	`true`	`boolean`
Optionally add a close button to component and allow it to self dismiss.
index	-	`number`
index of the component.
title	-	`string`
Title node for your component.
visible	-	`boolean`
Toggle the visibility of component.

Event name
close
Callback fired when the component requests to be closed.
show
Callback fired when the component requests to be shown.

jsx

import { CToastClose } from '@coreui/vue-pro'

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-pro'

Property	Default	Type
closeButton	-	`boolean`
Automatically add a close button to the header.

jsx

import { CToaster } from '@coreui/vue-pro'

Property	Default	Type
placement	-	`string`
Describes the placement of component.