To label the status of something.
| Class (Std.) | Class (Alt.) | Description |
|---|---|---|
.c-pill |
.pill |
space, shape, and size |
.c-pill--should-truncate |
.pill--truncate |
truncate text* |
.c-pill--is-danger |
.pill--danger |
for a “danger” status |
.c-pill--is-success |
.pill--success |
for a “success” status |
.c-pill--is-... |
.pill--... |
for a “…” status |
* Requires client styles, because truncation can be context-dependent.
<dl>
<dt><code><span></code> <small>e.g. <code>display: inline</code></small></dt>
<dd>
<span class="c-pill">I am a pill</span>
</dd>
<dt><code><span <small>style="display: inline-block"</small>></code></dt>
<dd>
<span class="c-pill" style="display: inline-block">I am a pill</span>
</dd>
<dt><code><div></code> <small>e.g. <code>display: block</code></small></dt>
<dd>
<div class="c-pill">I am a pill</div>
</dd>
<dt><code><a></code></dt>
<dd>
<a href="#" class="c-pill">I am a pill</a>
</dd>
<dt><code><button></code></dt>
<dd>
<button class="c-pill">I am a pill</button>
</dd>
</dl>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
.demo-truncate .c-pill {
white-space: nowrap;
max-width: 10em;
}
.demo-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding-left: 0;
gap: 1em;
}
.c-pill:not([class*="c-pill--"]) {
background-color: var(--global-color-primary--x-light);
}
{
"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",
"types": [
"danger",
"success",
"warning",
"normal",
"fixed",
"updated"
]
}