No notes defined.
<dl>
<dt><code>button</code> (raw)</dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button">default</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button">default</a>
</dd>
<dt><code>button--type</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--type">default</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--type">default</a>
</dd>
<dt><code>button--type-primary</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--type-primary">default</button>
<button class="x-button x-button--type-primary" disabled>disabled</button>
<button class="x-button x-button--type-primary x-button--is-busy" disabled>--is-busy</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--type-primary">default</a>
<a href="#" class="x-button x-button--type-primary" disabled tabindex="-1">disabled</a>
<a href="#" class="x-button x-button--type-primary x-button--is-busy" disabled tabindex="-1">--is-busy</a>
</dd>
<dt><code>button--type-secondary</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--type-secondary">default</button>
<button class="x-button x-button--type-secondary" disabled>disabled</button>
<button class="x-button x-button--type-secondary x-button--is-busy" disabled>--is-busy</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--type-secondary">default</a>
<a href="#" class="x-button x-button--type-secondary" disabled tabindex="-1">disabled</a>
<a href="#" class="x-button x-button--type-secondary x-button--is-busy" disabled tabindex="-1">--is-busy</a>
</dd>
<dt><code>button--type-tertiary</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--type-tertiary">default</button>
<button class="x-button x-button--type-tertiary" disabled>disabled</button>
<button class="x-button x-button--type-tertiary x-button--is-busy" disabled>--is-busy</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--type-tertiary">default</a>
<a href="#" class="x-button x-button--type-tertiary" disabled tabindex="-1">disabled</a>
<a href="#" class="x-button x-button--type-tertiary x-button--is-busy" disabled tabindex="-1">--is-busy</a>
</dd>
<dt><code>button--is-active</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--is-active">default</button>
<button class="x-button x-button--is-active" disabled>disabled</button>
<button class="x-button x-button--is-active x-button--is-busy" disabled>--is-busy</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--is-active">default</a>
<a href="#" class="x-button x-button--is-active" disabled tabindex="-1">disabled</a>
<a href="#" class="x-button x-button--is-active x-button--is-busy" disabled tabindex="-1">--is-busy</a>
</dd>
<dt><code>button--as-link</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--as-link">default</button>
<button class="x-button x-button--as-link x-button--as-link--hover">:hover</button>
<button class="x-button x-button--as-link x-button--as-link--active">:active</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--as-link">default</a>
<a href="#" class="x-button x-button--as-link x-button--as-link--hover">:hover</a>
<a href="#" class="x-button x-button--as-link x-button--as-link--active">:active</a>
</dd>
<dt><code>button--size-…</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--type-secondary x-button--size-small">small</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--type-secondary x-button--size-small">small</a>
</dd>
<dt><code>button--width-…</code></dt>
<dd>
<dfn><code><button></code>:</dfn>
<button class="x-button x-button--type-secondary x-button--width-short">short</button>
<button class="x-button x-button--type-secondary x-button--width-medium">medium</button>
<button class="x-button x-button--type-secondary x-button--width-long">long</button>
</dd>
<dd>
<dfn><code><a></code>:</dfn>
<a href="#" class="x-button x-button--type-secondary x-button--width-short">short</a>
<a href="#" class="x-button x-button--type-secondary x-button--width-medium">medium</a>
<a href="#" class="x-button x-button--type-secondary x-button--width-long">long</a>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
dfn {
width: 8ch;
}
dd {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.css"
}
],
"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": "tools",
"supportStyles": [
"../../assets/tools/x-button.css"
],
"typeStates": [
{
"label": "default"
},
{
"label": "disabled",
"disabled": true
},
{
"label": "--is-busy",
"disabled": true,
"extraClass": "x-button--is-busy"
}
],
"linkStates": [
{
"label": "default"
},
{
"label": ":hover",
"extraClass": "x-button--as-link--hover"
},
{
"label": ":active",
"extraClass": "x-button--as-link--active"
}
],
"widths": [
{
"label": "short",
"extraClass": "x-button--width-short"
},
{
"label": "medium",
"extraClass": "x-button--width-medium"
},
{
"label": "long",
"extraClass": "x-button--width-long"
}
]
}