Controls · 4 Props

IconBadge

Circular icon container with tone-based background coloring. Use for feature icons, step indicators, or decorative icon displays.

Controls 4 Props

src/components/blocks/IconBadge.astro

← Alle Components

Props

Prop	Type	Default
class	string	—
iconClass	string	—
name	string	solar:smile-circle-line-duotone
wrapClass	string	—

Beispiele

Tones

Tone-based background coloring.

{
  "type": "row",
  "props": {
    "gap": "md",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "iconBadge",
      "props": {
        "icon": "solar:star-bold",
        "tone": "primary"
      }
    },
    {
      "type": "iconBadge",
      "props": {
        "icon": "solar:heart-bold",
        "tone": "accent"
      }
    },
    {
      "type": "iconBadge",
      "props": {
        "icon": "solar:shield-check-bold",
        "tone": "success"
      }
    },
    {
      "type": "iconBadge",
      "props": {
        "icon": "solar:danger-triangle-bold",
        "tone": "warning"
      }
    },
    {
      "type": "iconBadge",
      "props": {
        "icon": "solar:close-circle-bold",
        "tone": "error"
      }
    }
  ]
}

<Row gap="md" align="center" wrap>
  <IconBadge icon="solar:star-bold" tone="primary" />
  <IconBadge icon="solar:heart-bold" tone="accent" />
  <IconBadge icon="solar:shield-check-bold" tone="success" />
  <IconBadge icon="solar:danger-triangle-bold" tone="warning" />
  <IconBadge icon="solar:close-circle-bold" tone="error" />
</Row>