To label the status of something.
| Mixin | Description |
|---|---|
pill |
space, shape, and size |
pill--should-truncate |
truncate text* |
pill--is-danger |
for a “danger” status |
pill--is-success |
for a “success” status |
pill--is-... |
for a “…” status |
* Requires client styles, because truncation can be context-dependent.
<dl>
<dt>Standard</dt>
<dd class="demo-list">
<span class="x-pill x-pill--is-danger">danger</span>
<span class="x-pill x-pill--is-success">success</span>
<span class="x-pill x-pill--is-warning">warning</span>
<span class="x-pill x-pill--is-normal">normal</span>
<span class="x-pill x-pill--is-fixed">fixed</span>
<span class="x-pill x-pill--is-updated">updated</span>
</dd>
<dt>Custom</dt>
<dd>
Avoid custom pills. Interfaces ideally have a limited number of statuses.
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.demo-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding-left: 0;
gap: 1em;
}
{
"shouldSkipPattern": true,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.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-pill.demo.css"
],
"types": [
"danger",
"success",
"warning",
"normal",
"fixed",
"updated"
]
}