
```jsx
import { CModalDialog } from '@coreui/react'
// or
import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
```

<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="cmodaldialog-alignment">
        <td className="text-primary fw-semibold">alignment<a href="#cmodaldialog-alignment" aria-label="CModalDialog alignment permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'top'`}</code>, <code>{`'center'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Align the modal in the center or top of the screen.</p>
        </td>
      </tr>
      <tr id="cmodaldialog-class-name">
        <td className="text-primary fw-semibold">className<a href="#cmodaldialog-class-name" aria-label="CModalDialog 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="cmodaldialog-fullscreen">
        <td className="text-primary fw-semibold">fullscreen<a href="#cmodaldialog-fullscreen" aria-label="CModalDialog fullscreen permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set modal to covers the entire user viewport.</p>
        </td>
      </tr>
      <tr id="cmodaldialog-scrollable">
        <td className="text-primary fw-semibold">scrollable<a href="#cmodaldialog-scrollable" aria-label="CModalDialog scrollable permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Does the modal dialog itself scroll, or does the whole dialog scroll within the window.</p>
        </td>
      </tr>
      <tr id="cmodaldialog-size">
        <td className="text-primary fw-semibold">size<a href="#cmodaldialog-size" aria-label="CModalDialog size permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Size the component small, large, or extra large.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
