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
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
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
Custom
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
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
Example with All Features
Here’s a comprehensive example using multiple features together:
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge