Pill

Class: FxPill · Tag: <fx-pill>

The <fx-pill> component is a rounded status chip designed for live system flags (such as ONLINE, TRIP, or WIND HIGH). It is commonly used in application headers, status bars, and monitoring views.

Note

Pro component. Available in @salsafx/ui-pro.

---

Installation

import '@salsafx/ui-pro';

<fx-pill
    variant="success"
    icon="fa-solid fa-circle"
    label="ONLINE"
></fx-pill>

<fx-pill
    variant="warning"
    icon="fa-solid fa-triangle-exclamation"
    label="WIND HIGH"
></fx-pill>

---

Usage

Live status and blinking

Use is-blinking to pulse the pill, drawing attention to active warnings or critical alarms.

<fx-pill
    variant="success"
    icon="fa-solid fa-circle"
    label="ONLINE"
></fx-pill>

<fx-pill
    variant="warning"
    icon="fa-solid fa-triangle-exclamation"
    label="WIND HIGH"
    is-blinking
></fx-pill>

Sizes

Pills support three sizes via the size attribute:

• small (default): Compact status chip, ideal for dense toolbars and headers.
• medium: Balanced intermediate size.
• large: Larger chip with generous padding and larger text.

<fx-pill
    variant="success"
    icon="fa-solid fa-circle"
    label="ONLINE"
    size="small"
></fx-pill>

<fx-pill
    variant="warning"
    icon="fa-solid fa-triangle-exclamation"
    label="WIND HIGH"
    size="medium"
></fx-pill>

<fx-pill
    variant="danger"
    icon="fa-solid fa-circle-xmark"
    label="TRIP"
    size="large"
></fx-pill>

Shapes

shape is "pill" by default. "roundedRect" is a lightly rounded rectangle and "rect" is square.

<fx-pill
    variant="success"
    icon="fa-solid fa-circle"
    label="ONLINE"
    shape="pill"
></fx-pill>

<fx-pill
    variant="warning"
    icon="fa-solid fa-triangle-exclamation"
    label="WIND HIGH"
    shape="roundedRect"
></fx-pill>

<fx-pill
    variant="danger"
    icon="fa-solid fa-circle-xmark"
    label="TRIP"
    shape="rect"
></fx-pill>

Variants

Set variant for standard semantic colors (success, warning, danger, primary, etc.). The background fill and border automatically adjust to complement the chosen accent color.

<fx-pill
    variant="success"
    icon="fa-solid fa-circle"
    label="ONLINE"
></fx-pill>

<fx-pill
    variant="danger"
    icon="fa-solid fa-circle-xmark"
    label="TRIP"
></fx-pill>

Icon

Display an icon before the label by setting the icon attribute to a Font Awesome class or SVG path. For custom icon components or markup, use the icon slot.

<!-- Via icon attribute -->
<fx-pill
    variant="warning"
    icon="fa-solid fa-triangle-exclamation"
    label="WIND HIGH"
></fx-pill>

<!-- Via icon slot -->
<fx-pill variant="warning" label="WIND HIGH">
    <fx-icon slot="icon" icon="fa-solid fa-wind"></fx-icon>
</fx-pill>

Custom colors

Override the default colors using color for text and icon, background for the fill, and border-color for the outline.

<fx-pill
    color="#22c55e"
    icon="fa-solid fa-circle"
    label="ONLINE"
></fx-pill>

<fx-pill
    color="#38bdf8"
    background="#082f49"
    border-color="#164e63"
    label="UTC LIVE"
></fx-pill>

---

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
variant	variant	String	—	Semantic color style. See Variants. Defaults to success green.
label	label	String	""	Text label displayed inside the pill.
icon	icon	String	""	Icon class (e.g. "fa-solid fa-circle") or SVG path displayed before the label.
size	size	String	"small"	"small", "medium", or "large".
shape	shape	String	"pill"	"pill", "roundedRect", or "rect".
isBlinking	is-blinking	Boolean	false	Enables a pulsing blink animation for active warnings.
color	color	String	""	Custom text and icon color. Overrides variant.
background	background	String	""	Custom background fill color.
borderColor	border-color	String	""	Custom border outline color.

Slots

Name	Description
— (default)	Content displayed inside the pill when the label attribute is not set.
icon	Custom icon element placed before the label. Overrides the icon attribute.

CSS Custom Properties

Property	Default	Description
--fx-font-family	sans-serif	Font stack.
--fx-pill-foreground	accent	Text and icon color.
--fx-pill-background	translucent accent	Background fill color.
--fx-pill-border	accent border	Border outline color.

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxPill
    FxElement <|-- FxPill

See also Architecture, Badge, and Variants.