Glass UI

Badge

Interactive badge used to display status, tags, or trigger actions in the interface.

StrongGlassSoft

Installation

npx @glass-ui-kit/cli add badge

Usage

import { Badge } from "@/components/ui/badge"


export default function App() {
  return (
    <Badge className="glass">
      Glass Badge
    </Badge>
  )
}

Examples

Weights

Demonstrates the different intensities of the glassmorphism effect. You can use the glass, glass-soft, or glass-strong classes to adjust the background opacity and blur to perfectly match your background.

StrongGlassSoftDefault

With Icon

You can easily incorporate icons inside the badge to provide more visual context.

Pending

With Spinner

A badge can display a loading state by including a spinner animation.

Sending

The badge can be rendered as a clickable element.

Open link

Custom Colors

You can easily override or add colors using standard Tailwind CSS utility classes.

BlueGreenYellowRedPurple

Styling

There are no variant props. The styling is controlled entirely using classes, as the system is based on glassmorphism.

<Badge className="glass" />


<Badge className="glass glass-soft" />


<Badge className="glass glass-strong" />
Components Button