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>Standard</dt>
<dd class="demo-list">
<span class="c-pill c-pill--is-danger">danger</span>
<span class="c-pill c-pill--is-success">success</span>
<span class="c-pill c-pill--is-warning">warning</span>
<span class="c-pill c-pill--is-normal">normal</span>
<span class="c-pill c-pill--is-fixed">fixed</span>
<span class="c-pill c-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-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"
]
}