Controls · 6 Props

Badge

Small inline label for status indicators, tags, counters, and categories. Supports tone coloring and style variants (solid, outline, soft).

Controls 6 Props

src/components/blocks/Badge.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
alpha	number	—
class	string	—
icon	string	—
iconClass	string	—
iconPosition	string	start	"start" \| "end"
label	string	—

Beispiele

Tones & Variants

Tone + Variant Kombinationen.

Default Primary Accent Outline Soft Primary Soft Success

{
  "type": "row",
  "props": {
    "gap": "sm",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "badge",
      "props": {
        "label": "Default"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Primary",
        "tone": "primary"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Accent",
        "tone": "accent"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Outline",
        "variant": "outline"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Soft Primary",
        "tone": "primary",
        "variant": "soft"
      }
    },
    {
      "type": "badge",
      "props": {
        "label": "Soft Success",
        "tone": "success",
        "variant": "soft"
      }
    }
  ]
}

<Row gap="sm" align="center" wrap>
  <Badge label="Default" />
  <Badge label="Primary" tone="primary" />
  <Badge label="Accent" tone="accent" />
  <Badge label="Outline" variant="outline" />
  <Badge label="Soft Primary" tone="primary" variant="soft" />
  <Badge label="Soft Success" tone="success" variant="soft" />
</Row>