Glass Badge

A compact label for metadata and status using glass surface treatments.

Badge

import { GlassBadge } from "@/components/ui/glasscn/glass-badge"

export function BadgeDemo() {
  return <GlassBadge glassVariant="liquid-bold">Badge</GlassBadge>

Installation

$ npx shadcn add @glasscn/glass-badge

API

Prop

Type

Default

Description

GlassBadgeglassVariant

"clear" | "frosted" | "subtle" | "liquid" | "liquid-bold""clear"

Controls the glass surface treatment.

GlassBadge...props

React.ComponentProps<typeof Badge>-

Props from the underlying shadcn/ui primitive.

Variants

clear

Badge

frosted

Badge

subtle

Badge

liquid

Badge

liquid-bold

Badge