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"
}
]
}
]
}