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 CToast
import { CToast } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| animation | true | boolean, undefined |
Apply a CSS fade transition to the toast. |
| autohide | true | boolean, 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. |
| delay | 5000 | number, 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. |
import { CToastHeader } from '@coreui/react-pro'
| Property | Default | Type |
|---|
Sets the aria-label of the close button. |
A string of all className you want applied to the base component. |
Automatically add a close button to the header. |
CToastBody
import { CToastBody } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| className | - | string, undefined |
A string of all className you want applied to the base component. |
CToastClose
import { CToastClose } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| aria-label | 'Close' | string, undefined |
Sets the aria-label attribute of the close button. |
| 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. |
| whiteDeprecated 5.0.0 | - | boolean, undefined |
Change the default color to white. |
CToaster
import { CToaster } from '@coreui/react-pro'
| Property | Default | Type |
|---|
| 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. |