Badge
A compact status label or count.
Upstream documentationExamples
DefaultSecondaryOutline
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Badge
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/badge.json'Usage
A complete example using the installed component and hook paths.
Badge usage
"use client";import { Badge } from "@/components/ui/badge";const BadgePreview = function BadgePreview() { return ( <div className="flex flex-wrap justify-center gap-2"> <Badge>Default</Badge> <Badge variant="secondary">Secondary</Badge> <Badge variant="outline">Outline</Badge> </div> ); };export default function Demo() { return <BadgePreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Badge
Badge props
useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { sound?: boolean }- variant
- "default"
- sound
- true
badgeVariants
Exported value.