React Toast Component API

Toast API

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

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

On this page

CToast#

import { CToast } from '@coreui/react'
// or
import CToast from '@coreui/react/src/components/toast/CToast'

Property	Default	Type
animation#	`true`	`boolean`
Apply a CSS fade transition to the toast.
autohide#	`true`	`boolean`
Auto hide the toast.
className#	-	`string`
A string of all className you want applied to the base component.
color#	-	`'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string`
Sets the color context of the component to one of CoreUI’s themed colors.
delay#	`5000`	`number`
Delay hiding the toast (ms).
onClose#	-	`(index: number) => void`
Callback fired when the component requests to be closed.
onShow#	-	`(index: number) => void`
Callback fired when the component requests to be shown.
visible#	`false`	`boolean`
Toggle the visibility of component.

CToastHeader#

import { CToastHeader } from '@coreui/react'
// or
import CToastHeader from '@coreui/react/src/components/toast/CToastHeader'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
closeButton#	-	`boolean`
Automatically add a close button to the header.

CToastBody#

import { CToastBody } from '@coreui/react'
// or
import CToastBody from '@coreui/react/src/components/toast/CToastBody'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.

CToastClose#

import { CToastClose } from '@coreui/react'
// or
import CToastClose from '@coreui/react/src/components/toast/CToastClose'

Property	Default	Type
active#	-	`boolean`
Toggle the active state for the component.
as#	-	`(ElementType & string)`, `(ElementType & ComponentClass<any, any>)`, `(ElementType & FunctionComponent<any>)`
Component used for the root node. Either a string to use a HTML element or a component.
className#	-	`string`
A string of all className you want applied to the base component.
dark#	-	`boolean`
Invert the default color.
disabled#	-	`boolean`
Toggle the disabled state for the component.
href#	-	`string`
The href attribute specifies the URL of the page the link goes to.
shape#	-	`'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'`, `string`
Select the shape of the component.
size#	-	`'sm'`, `'lg'`
Size the component small or large.
type#	-	`'button'`, `'submit'`, `'reset'`
Specifies the type of button. Always specify the type attribute for the `<button>` element. Different browsers may use different default types for the `<button>` element.
variant#	-	`'outline'`, `'ghost'`
Set the button variant to an outlined button or a ghost button.
white#Deprecated 5.0.0	-	`boolean`
Change the default color to white.

CToaster#

import { CToaster } from '@coreui/react'
// or
import CToaster from '@coreui/react/src/components/toast/CToaster'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
placement#	-	`'top-start'`, `'top'`, `'top-end'`, `'middle-start'`, `'middle'`, `'middle-end'`, `'bottom-start'`, `'bottom'`, `'bottom-end'`, `string`
Describes the placement of your component.
push#	-	`ReactElement`
Adds new `CToast` to `CToaster`.