# React Toast Component API

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

## CToast

```jsx
import { CToast } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `animation` | `boolean \| undefined` | `true` | Apply a CSS fade transition to the toast. |
| `autohide` | `boolean \| undefined` | `true` | 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` | `number \| undefined` | `5000` | 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` | `false` | Toggle the visibility of component. |

## CToastHeader

```jsx
import { CToastHeader } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |

## CToastClose

```jsx
import { CToastClose } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `white` | `boolean \| undefined` | - | Change the default color to white. |

## CToaster

```jsx
import { CToaster } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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`. |