Components
Badge
A hand-drawn label badge with rough border and semantic variants.
Default
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/badge.jsonProps
PropTypeDefaultDescription
animateOnHoverbooleantrueRedraws the sketch lines on hover.
children*ReactNode—
Content rendered inside the component.
classNamestring—
Additional Tailwind classes applied to the component.
idstring—
Optional stable id used for sketch seeding and accessibility.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
variantBadgeVariant"default"Controls the `variant` behavior.
Variants
DefaultSuccessWarningErrorOutline
Hover animation
Pass animateOnHover to redraw the border on hover.
Hover me
Accessibility
Badge is decorative by default and has no implicit interactive semantics. If you use it to convey status alone, repeat the same state in nearby text for screen-reader users.
Examples
import { Badge } from "@/components/crumble/ui/badge";
<Badge>Default</Badge>;