Badge API
This page provides an overview of the Badge component API, detailing its props, emits, slots, and exposed methods/states.
Props
The Badge component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
mode | "primary" | "primary" or "secondary" or "outline" or "neutral" or undefined | The visual style of the badge. |
class | "" | StyleClass or undefined | Custom CSS class for the badge container. |
classContent | "" | StyleClass or undefined | Custom CSS class for the badge content. |
point | false | boolean or undefined | Whether to display a small circular point indicator on the badge. |
closeButton | false | boolean or undefined | Whether to display a close button on the badge. |
Emits
The Badge component emits the following events:
| Event | Payload | Description |
|---|---|---|
delete | void | Emitted when the close button is clicked or the badge is otherwise removed. |
Slots
The Badge component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Default slot for custom content inside the badge component. |
Expose
The Badge component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
mode | BadgeProps["mode"] | Current visual style mode of the badge. |
isPoint | BadgeProps["point"] | Indicates whether the point indicator is enabled. |
isCloseButton | BadgeProps["closeButton"] | Indicates whether the close button is enabled. |
deleteBadge | () => void | Deletes the badge and triggers the delete event. |