Unkey
Components

Badge

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

Overview

The Badge component provides a consistent way to display status indicators, categories, or labels throughout your application. It's designed to provide quick visual context with multiple styling options and accessibility features.

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

All available variants for different use cases.

PrimarySecondarySuccessWarningBlockedError

Size Variants

Different sizes available for the badge component.

Default SizeDefault
Small SizeSmall

Monospace Font

Badges with monospace font for technical content like IDs or codes.

uk_1234567890abcdefv1.2.3200 OK404 NOT_FOUND

Status Badges

Common status indicators used in applications.

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

Interactive Badges

Interactive styling with hover effects.

Clickable TagCategory✓ Verifiedv2.1.0-beta

Features

  • Multiple Variants: Six different visual styles (primary, secondary, success, warning, blocked, error)
  • Size Options: Default and small sizes for different contexts
  • Font Options: Support for monospace font for technical content
  • Accessibility: Built-in accessibility support with proper contrast ratios
  • Customizable: Extensive styling options through className prop
  • Responsive: Adapts to different screen sizes

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

Structure

The Badge component is a simple, self-contained component that doesn't require sub-components. It renders as a single span element with appropriate styling and accessibility attributes.

Styling

The Badge component includes default styling with:

  • Consistent padding and border radius
  • Color-coded variants for semantic meaning
  • Dark mode support
  • Hover states for interactive badges
  • Focus states for accessibility
  • Responsive design

Custom Styling

You can customize the appearance using the className prop:

<Badge 
  variant="primary" 
  className="custom-badge-class hover:bg-blue-500"
>
  Custom Badge
</Badge>

Accessibility

The Badge component follows accessibility best practices:

  • Semantic HTML: Uses semantic HTML with proper color contrast ratios
  • Text Readability: Text is readable and meets WCAG guidelines
  • Screen Reader Support: Can be used with screen readers without issues
  • Visual Feedback: Hover states provide visual feedback for interactive elements
  • Focus Management: Proper focus states for keyboard navigation

On this page