Koori UI
Components

GlassBadge

A glassmorphism-styled badge for statuses, labels, and categories.

Preview

Default
Primary
Success
Warning
Danger

Usage

import { GlassBadge } from "koori-ui";
 
<GlassBadge>Default</GlassBadge>
<GlassBadge variant="primary">Primary</GlassBadge>

Variants

<GlassBadge variant="default">Default</GlassBadge>
<GlassBadge variant="primary">Primary</GlassBadge>
<GlassBadge variant="success">Success</GlassBadge>
<GlassBadge variant="warning">Warning</GlassBadge>
<GlassBadge variant="danger">Danger</GlassBadge>

In Context

import { GlassBadge, GlassText } from "koori-ui";
 
<div className="flex items-center gap-2">
  <GlassText>Deployment status</GlassText>
  <GlassBadge variant="success">Live</GlassBadge>
</div>

Props

PropTypeDefaultDescription
variant"default" | "primary" | "success" | "warning" | "danger""default"Visual style
classNamestring—Additional CSS classes
childrenReactNode—Badge label content

All native <div> props are also accepted.

Previous

GlassAlert

Next

GlassTooltip

On this page