Badge

Badge is a component for displaying small status indicators, labels, or interactive tags with customizable styles.

Basic Usage

The Badge component allows you to display small status indicators, labels, or interactive tags. It provides options for style modes, point indicators, and close buttons.

To get started, simply use the Badge component and customize it using its properties.

Badge

<Badge>Badge</Badge>

Style Modes

The mode property defines the style of the badge. Available options are:

primary: Default style with prominent color.
secondary: Subtle style with lighter background.
outline: Bordered style with a transparent background.
neutral: Minimal style with a subtle outline.

Primary

Secondary

Outline

Neutral

<Badge mode="primary">Primary</Badge>
<Badge mode="secondary">Secondary</Badge>
<Badge mode="outline">Outline</Badge>
<Badge mode="neutral">Neutral</Badge>

Custom CSS Classes

Customize the appearance of the badge using the class and classContent properties.

class: Applies custom classes to the badge container.
classContent: Applies custom classes to the badge content.

Custom

<Badge class="bg-blue-500 text-white">Custom Container</Badge>
<Badge classContent="text-lg font-bold">Custom Content</Badge>

Point Indicator

Enable a small circular point indicator by setting the point property to true. This is useful for representing notifications or status.

Primary

Secondary

Outline

Neutral

<Badge point mode="primary">Primary</Badge>
<Badge point mode="secondary">Secondary</Badge>
<Badge point mode="outline">Outline</Badge>
<Badge point mode="neutral">Neutral</Badge>

Close Button

Add an interactive close button to the badge by setting the closeButton property to true. This emits a delete event when clicked.

Badge

<Badge closeButton @delete="handleDelete">Closable Badge</Badge>

Example with All Features

Here’s a comprehensive example using multiple features together:

Badge