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

<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="ctoastclose-active">
        <td className="text-primary fw-semibold">active<a href="#ctoastclose-active" aria-label="CToastClose active permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the active state for the component.</p>
        </td>
      </tr>
      <tr id="ctoastclose-as">
        <td className="text-primary fw-semibold">as<a href="#ctoastclose-as" aria-label="CToastClose as permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(ElementType & string)`}</code>, <code>{`(ElementType & ComponentClass<any, any>)`}</code>, <code>{`(ElementType & FunctionComponent<any>)`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
        </td>
      </tr>
      <tr id="ctoastclose-class-name">
        <td className="text-primary fw-semibold">className<a href="#ctoastclose-class-name" aria-label="CToastClose 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="ctoastclose-dark">
        <td className="text-primary fw-semibold">dark<a href="#ctoastclose-dark" aria-label="CToastClose dark permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Invert the default color.</p>
        </td>
      </tr>
      <tr id="ctoastclose-disabled">
        <td className="text-primary fw-semibold">disabled<a href="#ctoastclose-disabled" aria-label="CToastClose disabled permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the disabled state for the component.</p>
        </td>
      </tr>
      <tr id="ctoastclose-href">
        <td className="text-primary fw-semibold">href<a href="#ctoastclose-href" aria-label="CToastClose href permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The href attribute specifies the URL of the page the link goes to.</p>
        </td>
      </tr>
      <tr id="ctoastclose-shape">
        <td className="text-primary fw-semibold">shape<a href="#ctoastclose-shape" aria-label="CToastClose shape permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Select the shape of the component.</p>
        </td>
      </tr>
      <tr id="ctoastclose-size">
        <td className="text-primary fw-semibold">size<a href="#ctoastclose-size" aria-label="CToastClose size permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Size the component small or large.</p>
        </td>
      </tr>
      <tr id="ctoastclose-type">
        <td className="text-primary fw-semibold">type<a href="#ctoastclose-type" aria-label="CToastClose type permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'button'`}</code>, <code>{`'submit'`}</code>, <code>{`'reset'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Specifies the type of button. Always specify the type attribute for the <code>{`<button>`}</code> element. Different browsers may use different default types for the <code>{`<button>`}</code> element.</p>
        </td>
      </tr>
      <tr id="ctoastclose-variant">
        <td className="text-primary fw-semibold">variant<a href="#ctoastclose-variant" aria-label="CToastClose variant permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'outline'`}</code>, <code>{`'ghost'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set the button variant to an outlined button or a ghost button.</p>
        </td>
      </tr>
      <tr id="ctoastclose-white">
        <td className="text-primary fw-semibold">white<a href="#ctoastclose-white" aria-label="CToastClose white permalink" className="anchor-link after">#</a><span className="badge bg-danger">Deprecated 5.0.0</span></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Change the default color to white.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
