
```jsx
import { CToast } from '@coreui/react'
// or
import CToast from '@coreui/react/src/components/toast/CToast'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="ctoast-animation">
        <td className="text-primary fw-semibold">animation<a href="#ctoast-animation" aria-label="CToast animation permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Apply a CSS fade transition to the toast.</p>
        </td>
      </tr>
      <tr id="ctoast-autohide">
        <td className="text-primary fw-semibold">autohide<a href="#ctoast-autohide" aria-label="CToast autohide permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Auto hide the toast.</p>
        </td>
      </tr>
      <tr id="ctoast-class-name">
        <td className="text-primary fw-semibold">className<a href="#ctoast-class-name" aria-label="CToast className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="ctoast-color">
        <td className="text-primary fw-semibold">color<a href="#ctoast-color" aria-label="CToast color permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
        </td>
      </tr>
      <tr id="ctoast-delay">
        <td className="text-primary fw-semibold">delay<a href="#ctoast-delay" aria-label="CToast delay permalink" className="anchor-link after">#</a></td>
        <td><code>{`5000`}</code></td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Delay hiding the toast (ms).</p>
        </td>
      </tr>
      <tr id="ctoast-on-close">
        <td className="text-primary fw-semibold">onClose<a href="#ctoast-on-close" aria-label="CToast onClose permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(index: number) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be closed.</p>
        </td>
      </tr>
      <tr id="ctoast-on-show">
        <td className="text-primary fw-semibold">onShow<a href="#ctoast-on-show" aria-label="CToast onShow permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(index: number) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be shown.</p>
        </td>
      </tr>
      <tr id="ctoast-visible">
        <td className="text-primary fw-semibold">visible<a href="#ctoast-visible" aria-label="CToast visible permalink" className="anchor-link after">#</a></td>
        <td><code>{`false`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the visibility of component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
