Skip to content

Badge

The badge component.

  • Import
    import "@tapsioss/web-components/badge";
  • Tag
    <tapsi-badge></tapsi-badge>

Properties

NameDescriptionTypeDefault Value
valueThe value of the badge.string | number""
variantThe variant of the badge."pill" | "numeral" | "dot""pill"
colorThe color of the badge."success" | "error" | "info" | "warning" | "neutral""neutral"
priorityThe priority level of the badge."high" | "low""high"
sizeThe size of the badge."md" | "sm""md"

Slots

NameDescription
iconThe slot for icon element.

TIP

You can use slot names as variables:

ts
import { Slots } from "@tapsioss/web-components/badge";

console.log(Slots.ICON); // "icon"