Chuv Studio

02 — COMPONENTS

Badge

Small metadata label for services, tools, stack, project stage, and portfolio context. Built from shadcn/ui and adapted to the Chuv Studio foundation, following the rule that internal section elements always use zero corner radius.

Variants

Core badge variants adapted to the studio's design tokens

Default
Studio
<Badge>Studio</Badge>
Secondary
Internal
<Badge variant="secondary">Internal</Badge>
Outline
Case Study
<Badge variant="outline">Case Study</Badge>
Service
Product Design
<Badge variant="service">
  <BriefcaseBusiness />
  Product Design
</Badge>
Tool
Figma
<Badge variant="tool">
  <Figma />
  Figma
</Badge>
Success
Live
<Badge variant="success">
  <BadgeCheck />
  Live
</Badge>
Warning
In Progress
<Badge variant="warning">
  <Sparkles />
  In Progress
</Badge>

Studio Contexts

Examples that make sense for a design studio working with products and tech

Services

Brand SystemProduct DesignUX Audit

Tools & Stack

FigmaNext.jsshadcn/ui

Case Metadata

SaaSDelivered24
<Badge variant="service">Product Design</Badge>
<Badge variant="tool">
  <Code2 />
  Next.js
</Badge>
<Badge variant="success">Delivered</Badge>

Sizes & Formats

Compact labels, default metadata, highlighted badges, and numeric counters

SM
UI SYSTEM
<Badge size="sm" variant="service">UI SYSTEM</Badge>
Default
React
<Badge variant="tool">React</Badge>
LG
+43% conversion
<Badge size="lg" variant="success">
  <TrendingUp />
  +43% conversion
</Badge>
Count
12
<Badge size="count">12</Badge>

Interactive Demo

Preview variant, size, icon usage, and dark mode

Variant

Size

Product Design
<Badge variant="service" size="default">
  <BriefcaseBusiness />
  Product Design
</Badge>

Usage

Import, props, examples, and accessibility notes

Import

import { Badge } from "@/components/badge"

Props

variant

"default" | "secondary" | "outline" | "service" | "tool" | "success" | "warning"

"default"

size

"sm" | "default" | "lg" | "count"

"default"

children

React.ReactNode

Badge content

className

string

Optional visual overrides

Common Patterns

<Badge variant="tool">
  <Code2 />
  Next.js
</Badge>

<Badge variant="service">UX Audit</Badge>

<Badge size="count">12</Badge>

Accessibility

  • Badges are non-interactive by default and should be used as metadata labels.
  • If a badge becomes clickable, render it with the correct semantic element such as a button or link.
  • Do not rely on color alone for status; pair it with meaningful text like “Live” or “In Progress”.