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.
CToast#
import { CToast } from '@coreui/react'// orimport 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'// orimport 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'// orimport 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'// orimport 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 | ||
| 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'// orimport 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 | ||