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>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. | BadgeVariants | 'primary' |
Slots
| Slot | Description |
|---|---|
| default | Main content inside the badge. |
Custom Tag
Use the tag prop to define which HTML element should be rendered (e.g., span, div, a).
Pill Style
Enable the pill prop to render a badge with fully rounded edges.
By default, pill is true. To render a standard badge without pill styling, set :pill="false":
<e8-badge variant="warning">Default pill style</e8-badge>
<e8-badge variant="warning" :pill="false">Default non-pill style</e8-badge>Contextual variants
Apply contextual styling by setting the variant prop.
<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>