Matcha UI
DocsInstallIcons

Start

  • Introduction
  • Installation
  • Phosphor icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Card
  • Line Chart Card
  • Bar Chart Card
  • Donut Chart Card
  • Checkbox
  • Command
  • Dialog
  • Dropdown Menu
  • Input
  • Label
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Slider
  • Sonner (Toast)
  • Switch
  • Table
  • Tabs
  • Textarea
  • Collapsible
  • Sidebar navigation
  • Page header
  • Empty state
  • KPI card
  • Data table toolbar
  • Tooltip
← All components

Badge

Compact labels for status, plans, and metadata.

Default
Pro
Action
Trial

Example

import { Badge } from "matcha-ui";

<div className="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Pro</Badge>
  <Badge variant="outline">Trial</Badge>
</div>

Created by Jacob Olenick & DesignOps Studio