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

Prop	Type	Default	Description
`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.
`className`	`string`	-	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

Badge

On this page