Badge

Badge Component

The Badge component is used to display small, labeled indicators with customizable colors, sizes, and styles. It supports two visual types: solid and soft, with optional tooltips.

Example Usage

<x-badge color="danger" type="soft" tooltip="This is a danger badge">
    Danger
</x-badge>

Props

• color (string, default: "default")
  Defines the color theme of the badge. Supported values: inverse, primary, secondary, info, success, warning, danger, default.

• type (string, default: "solid")
  Controls the visual style. Options:

  • solid: Bold background with border and text.
  • soft: Subtle background with border and colored text.

• size (string, default: "sm")
  Adjusts the badge size and padding. Options: xs, sm, md, lg.

• tooltip (string|null)
  Optional tooltip text displayed on hover.

Overview

This Badge component offers versatile labeled tags suitable for status indicators, categories, or counts. The solid style is more prominent, while the soft style is more subtle and lightweight. It integrates Tailwind CSS and supports dark mode styling and tooltips.