// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`StandardButtons.vue renders correctly 1`] = `
<div>
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Standard buttons
      </strong>
       
      <div
        class="c-card-header-actions"
      >
        <a
          class="card-header-action"
          href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
          rel="noreferrer noopener"
          target="_blank"
        >
          <small
            class="text-muted"
          >
            docs
          </small>
        </a>
      </div>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Normal
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Active State
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Disabled
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Outline Buttons
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <p>
        
        Use 
        <code>
          outline
        </code>
         prop
      
      </p>
       
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Normal
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        />
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Active State
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        />
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Disabled
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        />
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Ghost Buttons
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <p>
        
        Use
        
        <code>
          ghost
        </code>
         prop for ghost buttons.
      
      </p>
       
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Normal
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        />
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Active State
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        />
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Disabled
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        />
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Square Buttons
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <p>
        
        Use
        
        <code>
          square
        </code>
         prop for square buttons.
      
      </p>
       
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Normal
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Active State
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pressed="true"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Disabled
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Pill Buttons
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <p>
        
        Use
        
        <code>
          pill
        </code>
         prop for pill buttons.
      
      </p>
       
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Normal
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Active State
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            aria-pressed="true"
            block="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            pressed="true"
            routertag="a"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="12"
          tag="div"
          xl="true"
        >
          
          Disabled
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="light"
          >
            Light
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="dark"
          >
            Dark
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="6"
          md="2"
          sm="4"
          tag="div"
          xl="true"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            disabled="true"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="link"
          >
            Link
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Sizes
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <p>
        Fancy larger or smaller buttons? Add 
        <code>
          size="lg"
        </code>
         or 
        <code>
          size="sm"
        </code>
         for additional sizes.
      </p>
       
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="2"
          tag="div"
          xl="true"
        >
          
          Small
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="sm"
            target="_self"
            type="button"
            variant="primary"
          >
            Standard Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="sm"
            target="_self"
            type="button"
            variant="secondary"
          >
            Outline Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            size="sm"
            target="_self"
            type="button"
            variant="success"
          >
            Ghost Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="sm"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            Square Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            size="sm"
            target="_self"
            type="button"
            variant="danger"
          >
            Pill Button
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="2"
          tag="div"
          xl="true"
        >
          
          Normal
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Standard Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Outline Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Ghost Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            Square Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Pill Button
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
       
      <crow-stub
        class="c-align-items-center c-mt-3"
      >
        <ccol-stub
          class="c-mb-3 c-mb-xl-0"
          col="2"
          tag="div"
          xl="true"
        >
          
          Large
        
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="primary"
          >
            Standard Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="secondary"
          >
            Outline Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="success"
          >
            Ghost Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            Square Button
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-mb-3 c-mb-xl-0 c-text-center"
          col="2"
          tag="div"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="danger"
          >
            Pill Button
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        With Icons
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <crow-stub
        class="c-align-items-center"
      >
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            <i
              class="cui-lightbulb"
            />
             Standard Button
          
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            <i
              class="cui-lightbulb"
            />
             Outline Button
          
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            <i
              class="cui-lightbulb"
            />
             Ghost Button
          
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            square="true"
            target="_self"
            type="button"
            variant="warning"
          >
            <i
              class="cui-lightbulb"
            />
             Square Button
          
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            pill="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            <i
              class="cui-lightbulb"
            />
             Pill Button
          
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <ccard-stub
    subtitletag="h6"
    titletag="h4"
  >
    <ccardheader-stub
      subtitletag="h6"
      titletag="h4"
    >
      <strong>
        Toggle pressed state
      </strong>
    </ccardheader-stub>
     
    <ccardbody-stub
      subtitletag="h6"
      titletag="h4"
    >
      <crow-stub>
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="primary"
          >
            Primary Off
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="secondary"
          >
            Secondary Off
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="success"
          >
            Success Off
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="info"
          >
            Info Off
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="warning"
          >
            Warning Off
          </cbutton-stub>
        </ccol-stub>
         
        <ccol-stub
          class="c-text-center c-mt-3"
          sm="true"
          tag="div"
          xs="12"
        >
          <cbutton-stub
            activeclass="c-active"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            target="_self"
            type="button"
            variant="danger"
          >
            Danger Off
          </cbutton-stub>
        </ccol-stub>
      </crow-stub>
    </ccardbody-stub>
  </ccard-stub>
   
  <crow-stub>
    <ccol-stub
      md="6"
      tag="div"
      xs="12"
    >
      <ccard-stub
        subtitletag="h6"
        titletag="h4"
      >
        <ccardheader-stub
          subtitletag="h6"
          titletag="h4"
        >
          <strong>
            Block Level CButtons 
          </strong>
          <small>
            Add this 
            <code>
              block
            </code>
          </small>
        </ccardheader-stub>
         
        <ccardbody-stub
          subtitletag="h6"
          titletag="h4"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="secondary"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="primary"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="success"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="info"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="warning"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="danger"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="link"
          >
            Block level button
          </cbutton-stub>
        </ccardbody-stub>
      </ccard-stub>
    </ccol-stub>
     
    <ccol-stub
      md="6"
      tag="div"
      xs="12"
    >
      <ccard-stub
        subtitletag="h6"
        titletag="h4"
      >
        <ccardheader-stub
          subtitletag="h6"
          titletag="h4"
        >
          <strong>
            Block Level CButtons 
          </strong>
          <small>
            Add this 
            <code>
              block
            </code>
          </small>
        </ccardheader-stub>
         
        <ccardbody-stub
          subtitletag="h6"
          titletag="h4"
        >
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="secondary"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="primary"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="success"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="info"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="warning"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            outline="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="danger"
          >
            Block level button
          </cbutton-stub>
           
          <cbutton-stub
            activeclass="c-active"
            block="true"
            event="click"
            exactactiveclass="c-active"
            ghost="true"
            routertag="a"
            size="lg"
            target="_self"
            type="button"
            variant="info"
          >
            Block level button
          </cbutton-stub>
        </ccardbody-stub>
      </ccard-stub>
    </ccol-stub>
  </crow-stub>
</div>
`;
