Badge

Class: FxBadge · Tag: <fx-badge>

The <fx-badge> component is a compact label designed for displaying units (such as RPM, °C, MW), statuses, or counts in card headers, toolbars, and HMI dashboards.

Note

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

---

Installation

import '@salsafx/ui-pro';

<fx-badge variant="warning" label="RPM"></fx-badge>
<fx-badge variant="success" label="OK"></fx-badge>
<fx-badge variant="danger" label="TRIP"></fx-badge>

---

Usage

Variants

Use the variant attribute to apply predefined semantic color schemes (primary, secondary, success, danger, warning, info, light, dark). The label uses the variant’s accent color, accompanied by a subtle matching background.

<fx-badge variant="primary" label="Primary"></fx-badge>
<fx-badge variant="danger" label="Danger"></fx-badge>

Sizes

Badges support two sizes via the size attribute:

• small (default): Compact badge, designed to fit inside card headers.
• medium: Larger badge, suitable for standalone status indicators or section titles.

<fx-badge
    size="small"
    variant="warning"
    label="RPM"
></fx-badge>

<fx-badge
    size="medium"
    variant="warning"
    label="RPM"
></fx-badge>

Icon

Add an icon before the label with the icon attribute (Font Awesome class or SVG path). For custom markup, place an element into the icon slot.

<!-- Via icon attribute -->
<fx-badge
    variant="warning"
    icon="fa-solid fa-rotate"
    label="RPM"
></fx-badge>

<!-- Via icon slot -->
<fx-badge variant="warning" label="RPM">
    <fx-icon slot="icon" icon="fa-solid fa-rotate"></fx-icon>
</fx-badge>

Custom colors

Override the default palette by setting color for the text and icon, and background for the fill color.

<fx-badge
    color="#f59e0b"
    label="RPM"
></fx-badge>

<fx-badge
    color="#38bdf8"
    background="#082f49"
    label="LIVE"
></fx-badge>

In a card

<fx-card> includes a built-in badge attribute for simple text. When you need custom styling—such as a specific variant, icon, or size—slot an <fx-badge slot="badge"> directly into the card.

<!-- Simple text via badge attribute -->
<fx-card
    title="Rotor Speed"
    badge="RPM"
    icon="fa-solid fa-rotate"
    accent-color="#f59e0b"
>
    <fx-radial-gauge value="82" label="N1" unit="RPM"></fx-radial-gauge>
</fx-card>

<!-- Custom badge via slot -->
<fx-card
    title="Rotor Speed"
    icon="fa-solid fa-rotate"
    accent-color="#f59e0b"
>
    <fx-badge
        slot="badge"
        color="#38bdf8"
        label="LIVE"
    ></fx-badge>
    <fx-radial-gauge value="82" label="N1" unit="RPM"></fx-radial-gauge>
</fx-card>

---

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
variant	variant	String	—	Semantic color style. See Variants.
label	label	String	""	Text label displayed inside the badge.
icon	icon	String	""	Icon class (e.g. "fa-solid fa-rotate") or SVG path displayed before the label.
size	size	String	"small"	Badge size ("small" or "medium").
color	color	String	""	Custom text and icon color. Overrides variant.
background	background	String	""	Custom background fill color.

Slots

Name	Description
— (default)	Label content when the label attribute is not used.
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-badge-foreground	accent	Text and icon color.
--fx-badge-background	tint of accent	Background fill color.

---

Object Hierarchy

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

See also Architecture, Card, and Pill.