jelly badge
preview
pinkbluegreenyelloworangered
onlinelivestreamingbetanew
usage
Use a badge for short labels or enable the pulse dot for a live status.
import { JellyBadge } from "@/components/jelly/jelly-badge"
export function OnlineBadge() {
return <JellyBadge color="green" pulse>online</JellyBadge>
}setup notes
Requires React, TypeScript, Tailwind CSS, and the included cn helper. It accepts normal span attributes.
props
| prop | type | default | purpose |
|---|---|---|---|
| color | "pink" | "blue" | "green" | "yellow" | "orange" | "red" | "pink" | Sets the pastel badge color. |
| pulse | boolean | false | Shows an animated status dot. |
| children | ReactNode | - | Sets the badge label. |