
```jsx
import { CDropdownToggle } from '@coreui/react'
// or
import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle'
```

<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="cdropdowntoggle-active">
        <td className="text-primary fw-semibold">active<a href="#cdropdowntoggle-active" aria-label="CDropdownToggle 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="cdropdowntoggle-as">
        <td className="text-primary fw-semibold">as<a href="#cdropdowntoggle-as" aria-label="CDropdownToggle as permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ElementType`}</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="cdropdowntoggle-caret">
        <td className="text-primary fw-semibold">caret<a href="#cdropdowntoggle-caret" aria-label="CDropdownToggle caret permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Enables pseudo element caret on toggler.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-class-name">
        <td className="text-primary fw-semibold">className<a href="#cdropdowntoggle-class-name" aria-label="CDropdownToggle 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="cdropdowntoggle-color">
        <td className="text-primary fw-semibold">color<a href="#cdropdowntoggle-color" aria-label="CDropdownToggle 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="cdropdowntoggle-custom">
        <td className="text-primary fw-semibold">custom<a href="#cdropdowntoggle-custom" aria-label="CDropdownToggle custom permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Create a custom toggler which accepts any content.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-disabled">
        <td className="text-primary fw-semibold">disabled<a href="#cdropdowntoggle-disabled" aria-label="CDropdownToggle 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="cdropdowntoggle-href">
        <td className="text-primary fw-semibold">href<a href="#cdropdowntoggle-href" aria-label="CDropdownToggle 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="cdropdowntoggle-nav-link">
        <td className="text-primary fw-semibold">navLink<a href="#cdropdowntoggle-nav-link" aria-label="CDropdownToggle navLink permalink" className="anchor-link after">#</a><span className="badge bg-success">5.0.0+</span></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>If a dropdown <code>{`variant`}</code> is set to <code>{`nav-item`}</code> then render the toggler as a link instead of a button.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-role">
        <td className="text-primary fw-semibold">role<a href="#cdropdowntoggle-role" aria-label="CDropdownToggle role permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-shape">
        <td className="text-primary fw-semibold">shape<a href="#cdropdowntoggle-shape" aria-label="CDropdownToggle 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="cdropdowntoggle-size">
        <td className="text-primary fw-semibold">size<a href="#cdropdowntoggle-size" aria-label="CDropdownToggle 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="cdropdowntoggle-split">
        <td className="text-primary fw-semibold">split<a href="#cdropdowntoggle-split" aria-label="CDropdownToggle split permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>{`.dropdown-toggle-split`}</code> className for proper spacing around the dropdown caret.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-split-label">
        <td className="text-primary fw-semibold">splitLabel<a href="#cdropdowntoggle-split-label" aria-label="CDropdownToggle splitLabel permalink" className="anchor-link after">#</a><span className="badge bg-success">5.9.0+</span></td>
        <td><code>{`Toggle Dropdown`}</code></td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Screen reader label for split button dropdown toggle.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-trigger">
        <td className="text-primary fw-semibold">trigger<a href="#cdropdowntoggle-trigger" aria-label="CDropdownToggle trigger permalink" className="anchor-link after">#</a></td>
        <td><code>{`click`}</code></td>
        <td><code>{`'hover'`}</code>, <code>{`'focus'`}</code>, <code>{`'click'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets which event handlers you'd like provided to your toggle prop. You can specify one trigger or an array of them.</p>
        </td>
      </tr>
      <tr id="cdropdowntoggle-variant">
        <td className="text-primary fw-semibold">variant<a href="#cdropdowntoggle-variant" aria-label="CDropdownToggle 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>
    </tbody>
  </table>
</div>
