lims-frontent/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap

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

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