Hire Us Get CoreUI PRO all-access →

React Toast Component API

Toast API

Markdown ChatGPT Claude

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

On this page

CToast

jsx 
import { CToast } from '@coreui/react-pro'
PropertyDefaultType
animationtrueboolean, undefined

Apply a CSS fade transition to the toast.

autohidetrueboolean, undefined

Auto hide the toast.

className-string, undefined

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.

delay5000number, undefined

Delay hiding the toast (ms).

onClose-((index: number | null) => void), undefined

Callback fired when the component requests to be closed.

onShow-((index: number | null) => void), undefined

Callback fired when the component requests to be shown.

visible-boolean, undefined

Toggle the visibility of component.

CToastHeader

jsx 
import { CToastHeader } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

closeButton-boolean, undefined

Automatically add a close button to the header.

CToastBody

jsx 
import { CToastBody } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

A string of all className you want applied to the base component.

CToastClose

jsx 
import { CToastClose } from '@coreui/react-pro'
PropertyDefaultType
active-boolean, undefined

Toggle the active state for the component.

as-(ElementType & string), (ElementType & ComponentClass<any, any>), (ElementType & FunctionComponent<any>), undefined

Component used for the root node. Either a string to use a HTML element or a component.

className-string, undefined

A string of all className you want applied to the base component.

dark-boolean, undefined

Invert the default color.

disabled-boolean, undefined

Toggle the disabled state for the component.

href-string, undefined

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', undefined

Size the component small or large.

type-'button', 'submit', 'reset', undefined

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', undefined

Set the button variant to an outlined button or a ghost button.

whiteDeprecated 5.0.0-boolean, undefined

Change the default color to white.

CToaster

jsx 
import { CToaster } from '@coreui/react-pro'
PropertyDefaultType
className-string, undefined

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.