<dl>
<dt>Spinner</dt>
<dd>
<span class="spinner-border" aria-hidden="true"></span>
</dd>
<dt>Spinner in Bootstrap Button</dt>
<dd>
<button class="btn btn-primary" type="button" disabled>
<span>Action</span>
<span class="visually-hidden" role="status">Loading...</span>
<span class="spinner-border" aria-hidden="true"></span>
</button>
</dd>
<dt>Spinner in a TACC Button</dt>
<dd>
<button class="c-button c-button--primary c-button--is-busy" type="button" disabled>
<span>Action</span>
<span class="visually-hidden" role="status">Loading...</span>
<span class="spinner-border" aria-hidden="true"></span>
</button>
</dd>
<dt>Spinner in a Form</dt>
<dd>
<dl>
<dt>Component Form (<code>c-form</code>)</dt>
<dd class="s-form">
<dl>
<dt>Submit Button</dt>
<dd class="c-form">
<footer class="c-form__buttons">
<button class="c-form__button" data-state="busy" type="submit" disabled>
<span>Action</span>
<span class="visually-hidden" role="status">Loading...</span>
<span class="spinner-border" aria-hidden="true"></span>
</button>
</footer>
</dd>
<dt>Other Button</dt>
<dd class="c-form">
<button data-state="busy" type="button" disabled>
<span>Action</span>
<span class="visually-hidden" role="status">Loading...</span>
<span class="spinner-border" aria-hidden="true"></span>
</button>
</dd>
</dl>
</dd>
<dt>Scope Form (<code>s-form</code>)</dt>
<dd class="s-form">
<dl>
<dt>Submit Button</dt>
<dd class="s-form">
<footer>
<button data-state="busy" type="submit" disabled>
<span>Action</span>
<span class="visually-hidden" role="status">Loading...</span>
<span class="spinner-border" aria-hidden="true"></span>
</button>
</footer>
</dd>
<dt>Other Button</dt>
<dd class="s-form">
<button data-state="busy" type="button" disabled>
<span>Action</span>
<span class="visually-hidden" role="status">Loading...</span>
<span class="spinner-border" aria-hidden="true"></span>
</button>
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
.button-wrapper,
.c-form__buttons,
:where(.s-form > footer) {
margin-top: unset;
}
{
"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"
}
],
"shouldLoadBootstrap5": true,
"supportStyles": [
"../../assets/trumps/u-hide.css",
"../../assets/vendors/bootstrap5--border-spinner.css",
"../../assets/components/bootstrap5.border-spinner.css"
]
}