Unkey
DocsContributingCompanyArchitectureInfrastructureRFCsDesignGitHub
Components

Badge

A versatile badge component for displaying status, categories, or labels with multiple variants and styling options.

Usage

import { Badge } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <Badge variant="primary">Default</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="error">Error</Badge>
    </div>
  );
}

Examples

Default Variants

PrimarySecondarySuccessWarningBlockedError

Size Variants

Default SizeDefault
Small SizeSmall

Monospace Font

uk_1234567890abcdefv1.2.3200 OK404 NOT_FOUND

Status Badges

Active:Online
Warning:Rate Limited
Blocked:Suspended
Error:Failed
Info:Pending

Interactive Badges

Clickable TagCategory✓ Verifiedv2.1.0-beta

Props

PropTypeDefaultDescription
variant"primary" | "secondary" | "success" | "warning" | "blocked" | "error""primary"The visual variant of the badge.
size"DEFAULT" | "sm""DEFAULT"The size of the badge.
font"mono"-Use monospace font for the badge text.
classNamestring-Additional CSS classes to apply to the badge.

Variants

  • primary: Default neutral appearance with gray background
  • secondary: Subtle border style with lighter background
  • success: Green styling for positive states
  • warning: Yellow/orange styling for warnings
  • blocked: Orange styling for blocked or restricted states
  • error: Red styling for errors or negative states

Accessibility

The Badge component follows accessibility best practices:

  • Uses semantic HTML with proper color contrast ratios
  • Text is readable and meets WCAG guidelines
  • Can be used with screen readers without issues
  • Hover states provide visual feedback for interactive elements

Best Practices

  • Use badges to provide quick visual context about status or categories
  • Choose appropriate variants that match the semantic meaning
  • Keep badge text concise and descriptive
  • Use consistent badge styling across your application
  • Consider using the monospace font for technical content like IDs or codes

Previous

Icons

Next

Code

On this page