e8-badge
Updated on Aug 12, 2025 5 minutes to readUse badges to highlight counts, labels, or status indicators with flexible styling options.
Overview
Badges are inline elements that can display short pieces of information. They support different color variants and pill styling.
<e8-badge variant="success">
New
</e8-badge>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| pill | Applies pill-shaped rounded corners when set to true. | boolean | true |
| tag | Specifies the HTML tag to render the badge with. | string | 'span' |
| variant | Applies one of the theme color variants to the badge. | E8BadgeColorVariants | 'primary' |
Slots
| Slot | Description |
|---|---|
| default | Main content inside the badge. |
Properties Details
Pill
Renders the badge with fully rounded edges.
Default: true
<e8-badge variant="warning">Default pill style</e8-badge>
<e8-badge variant="warning" :pill="false">Non-pill style</e8-badge>
🔽 Show more
Tag
Specifies the HTML element to render. Examples include span, div, or a.
Default: 'span'
Variant
Applies a badge color variant.
Default: primary
<e8-badge variant="primary">Primary</e8-badge>
<e8-badge variant="secondary">Secondary</e8-badge>
<e8-badge variant="success">Success</e8-badge>
<e8-badge variant="danger">Danger</e8-badge>
<e8-badge variant="warning">Warning</e8-badge>
<e8-badge variant="info">Info</e8-badge>
<e8-badge variant="light">Light</e8-badge>
<e8-badge variant="dark">Dark</e8-badge>
🔽 Show more