Props
| Prop | Type | Default | Notes |
|---|---|---|---|
tone | neutral | primary | secondary | tertiary | error | neutral | |
size | xs | sm | md | lg | xl | md | |
appearance | solid | outline | dash | soft | ghost | solid | |
icon | string | '' |
StellarUI
<stellar-badge>
Properties
Preview
Markup
<stellar-badge icon="mdi:tag-outline">Badge</stellar-badge>API
Complete props, events, slots, and implementation notes for the shipped badge.
Events
| Event | Source | Notes |
|---|---|---|
| custom events | none | stellar-badge is a presentational label and does not emit custom events. |
Slots
| Slot | Notes |
|---|---|
icon | Optional leading icon content. Overrides the icon prop when populated. |
| default | Badge label content. |
Notes
- The public tag is `stellar-badge`, backed by a real inline `<span>` inside the shadow root.
- The shipped API is `tone`, `appearance`, `size`, and optional leading `icon`.
- The docs page now uses Datastar controls to drive one live badge instance instead of a static permutation matrix.
- `stellar-badge` uses `mode: 'open'`, so its styles stay encapsulated while still reading exported `stellar.css` variables through the shadow boundary.
- The visual baseline follows the shipped badge tone, outline, dash, soft, ghost, and size behavior with direct Stellar token mapping.