To skin Bootstrap v4+ Buttons.
        
        <dl>
    <dt>Types</dt>
    <dd>
        <button type="button" class="btn btn-primary">
            Primary
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-secondary">
            Secondary
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-info">
            Info
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-success">
            Success
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-warning">
            Warning
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-danger">
            Danger
        </button>
    </dd>
</dl>
<dl>
    <dt>Brightness</dt>
    <dd>
        <button type="button" class="btn btn-dark">
            Dark
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-light">
            Light
        </button>
    </dd>
</dl>
<dl>
    <dt>Sizes</dt>
    <dd>
        <button type="button" class="btn btn-primary btn-sm">
            Small
        </button>
    </dd>
</dl>
<dl>
    <dt>States</dt>
    <dd>
        <button type="button" class="btn btn-primary active">
            Primary Active
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-secondary active">
            Secondary Active
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-info active">
            Other Active
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-primary" disabled>
            Primary Disabled
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-secondary" disabled>
            Secondary Disabled
        </button>
    </dd>
    <dd>
        <button type="button" class="btn btn-info" disabled>
            Other Disabled
        </button>
    </dd>
</dl>
<dl>
    <dt>Variants</dt>
    <dd>
        <a href="#" class="btn btn-link">
            Link
        </a>
    </dd>
</dl>
        
    
                                /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
#demo {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
                            
                            
                        
        
            
            {
  "shouldSkipPattern": true,
  "globalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.demo.css"
    },
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.base.css"
    }
  ],
  "cmsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.cms.css"
    }
  ],
  "docsStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.docs.css"
    }
  ],
  "portalStyles": [
    {
      "isInternal": true,
      "layer": "base",
      "path": "/assets/core-styles.portal.css"
    }
  ],
  "subdir": "components",
  "groups": [
    {
      "title": "Types",
      "types": [
        {
          "type": "primary",
          "text": "Primary"
        },
        {
          "type": "secondary",
          "text": "Secondary"
        },
        {
          "type": "info",
          "text": "Info"
        },
        {
          "type": "success",
          "text": "Success"
        },
        {
          "type": "warning",
          "text": "Warning"
        },
        {
          "type": "danger",
          "text": "Danger"
        }
      ]
    },
    {
      "title": "Brightness",
      "types": [
        {
          "type": "dark",
          "text": "Dark"
        },
        {
          "type": "light",
          "text": "Light"
        }
      ]
    },
    {
      "title": "Sizes",
      "types": [
        {
          "type": "primary",
          "size": "sm",
          "text": "Small"
        }
      ]
    },
    {
      "title": "States",
      "types": [
        {
          "type": "primary",
          "active": true,
          "text": "Primary Active"
        },
        {
          "type": "secondary",
          "active": true,
          "text": "Secondary Active"
        },
        {
          "type": "info",
          "active": true,
          "text": "Other Active"
        },
        {
          "type": "primary",
          "disabled": true,
          "text": "Primary Disabled"
        },
        {
          "type": "secondary",
          "disabled": true,
          "text": "Secondary Disabled"
        },
        {
          "type": "info",
          "disabled": true,
          "text": "Other Disabled"
        }
      ]
    },
    {
      "title": "Variants",
      "types": [
        {
          "asLink": true,
          "href": "#",
          "text": "Link"
        }
      ]
    }
  ]
}