React Toast Component API

Toast API

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

On this page

jsx

import { CToast } from '@coreui/react'

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 \| null) => void)`
Callback fired when the component requests to be closed.
onShow	-	`((index: number \| null) => void)`
Callback fired when the component requests to be shown.
visible	-	`boolean`
Toggle the visibility of component.

jsx

import { CToastHeader } from '@coreui/react'

Property	Default	Type
ariaCloseLabel5.13.0+	-	`string`
Sets the `aria-label` of the close button.
className	-	`string`
A string of all className you want applied to the base component.
closeButton	-	`boolean`
Automatically add a close button to the header.

jsx

import { CToastBody } from '@coreui/react'

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

jsx

import { CToastClose } from '@coreui/react'

Property	Default	Type
aria-label	`'Close'`	`string`
Sets the `aria-label` attribute of the close button.
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.
whiteDeprecated 5.0.0	-	`boolean`
Change the default color to white.

jsx

import { CToaster } from '@coreui/react'

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`.