Badge Component
A versatile Badge component for labeling and categorizing content.import { Badge } from "@locus-ui/components";
<Badge variant="solid"> Top Subscriber</Badge>Anatomy
Import the component and its parts:Anatomy
import { Badge } from "@locus-ui/components"; <Badge />Examples
Variants
Badge components come with four built in variants,solid, outlined, muted, and clear.
variants.tsx
import { Badge } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted", "clear"];
return variants.map((variant) => ( <Badge key={variant} variant={variant}> {variant.charAt(0).toUpperCase() + variant.slice(1)} Badge </Badge>));Colors
The badge component uses thecolor prop to allow for predefined and custom colors.
colors.tsx
import { Badge } from "@locus-ui/components";
const colors = [ "primary", "secondary", "tertiary", "success", "danger", "warning", "info",];
return colors.map((color) => ( <Badge key={color} color={color} variant="muted"> {color.charAt(0).toUpperCase() + color.slice(1)} Badge </Badge>));Sizes
To manage the size of the badge component you can provide a default or custom size through thesize prop.
sizes.tsx
import { Badge } from "@locus-ui/components";
const sizes = ["xs", "sm", "md", "lg", "xl"];
return sizes.map((size) => ( <Badge key={size} size={size} variant="muted"> {size.toUpperCase()} Badge </Badge>));Color Inheritance
Works with any svg withfill="currentColor".
color-inheritance.tsx
import { Badge } from "@locus-ui/components";
const CheckMark = () => ( <svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M11.4669 3.72684..."