CSS: pill
.instui-pill — A compact status label; add a leading glyph with the shared -icon-<name> form.
Source: pill.css
Usage
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/pill.css";Demo
Examples
html
<span class="instui-pill">Draft</span>Draft
Modifiers
| Modifier | Description |
|---|---|
.-color-danger | Error status. |
.-color-info | Informational status. |
.-color-success | Positive status. |
.-color-warning | Cautionary status. |
.-icon-* | A leading glyph from the icon set (e.g. -icon-check), painted before the label. |
.-render-icon-<name> | Deprecated — The former renderIcon prop; still works as an alias, but use -icon-<name> instead. |
Pseudo-elements
| Pseudo-element | Description |
|---|---|
::before | The leading icon glyph, sized and spaced to the pill. |
Tokens consumed
| Token | Type | Value |
|---|---|---|
--instui-component-pill-background-color | <color> | light-dark(#ffffff, #10141A)LightDark |
--instui-component-pill-base-border-color | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-component-pill-base-text-color | <color> | light-dark(#273540, #F2F4F5)LightDark |
--instui-component-pill-border-radius | <length> | 0.5rem |
--instui-component-pill-border-style | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | solid |
--instui-component-pill-border-width | <length> | 0.0625rem |
--instui-component-pill-error-border-color | <color> | #E62429 |
--instui-component-pill-error-text-color | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-component-pill-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-pill-height | <length> | 24px |
--instui-component-pill-info-border-color | <color> | #2B7ABC |
--instui-component-pill-info-text-color | <color> | light-dark(#2871AF, #7FB4F1)LightDark |
--instui-component-pill-line-height | <length> | 0.875rem |
--instui-component-pill-max-width | <length> | 240px |
--instui-component-pill-padding-horizontal | <length> | 0.5rem |
--instui-component-pill-status-label-font-weight | <integer> | 600 |
--instui-component-pill-success-border-color | <color> | #03893D |
--instui-component-pill-success-text-color | <color> | light-dark(#037D37, #61C378)LightDark |
--instui-component-pill-text-font-size | <length> | 0.875rem |
--instui-component-pill-text-font-weight | <integer> | 600 |
--instui-component-pill-warning-border-color | <color> | #CF4A00 |
--instui-component-pill-warning-text-color | <color> | light-dark(#BB4200, #FF905A)LightDark |
--instui-font-size-text-xs | <length> | 0.75rem |