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

<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="ctoaster-class-name">
        <td className="text-primary fw-semibold">className<a href="#ctoaster-class-name" aria-label="CToaster 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="ctoaster-placement">
        <td className="text-primary fw-semibold">placement<a href="#ctoaster-placement" aria-label="CToaster placement permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'top-start'`}</code>, <code>{`'top'`}</code>, <code>{`'top-end'`}</code>, <code>{`'middle-start'`}</code>, <code>{`'middle'`}</code>, <code>{`'middle-end'`}</code>, <code>{`'bottom-start'`}</code>, <code>{`'bottom'`}</code>, <code>{`'bottom-end'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Describes the placement of your component.</p>
        </td>
      </tr>
      <tr id="ctoaster-push">
        <td className="text-primary fw-semibold">push<a href="#ctoaster-push" aria-label="CToaster push permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ReactElement`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Adds new <code>{`CToast`}</code> to <code>{`CToaster`}</code>.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
