Skip to main content
ninna-ui

Badge

Badges are used to highlight an item's status, category, or other metadata for quick recognition.

import { Badge } from "@ninna-ui/primitives"
pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Badge component in your application.

import { Badge } from "@ninna-ui/primitives";


export default function Example() {
  return (
    <Badge color="primary">
      New
    </Badge>
  );
}

Solid

Filled badges with solid background colors.

NeutralPrimarySecondaryAccentInfoSuccessWarningDanger

Soft

Badges with light tinted backgrounds and colored text (default variant).

NeutralPrimarySecondaryAccentInfoSuccessWarningDanger

Outline

Badges with transparent background and colored border.

NeutralPrimarySecondaryAccentInfoSuccessWarningDanger

Sizes

Badges in different sizes from small to large.

XSmallSmallMediumLargeXLarge

Radius

Different border radius options.

NoneSmallMediumLargeExtra LargeFull

With Icons

Badges combined with icons for enhanced visual communication.

VerifiedRejectedWarningInfo
FeaturedNew
ActiveInactive

Use Cases

Common use cases and patterns for badges.

Status Indicators

ActivePendingInactiveDraftArchived

Categories

TechnologyDesignMarketingBusiness

Notification Counts

31299+

Tags

ReactTypeScriptTailwindRemix

Custom

Custom colored badges with dark mode support.

Custom Badges

Custom colored badges with dark mode support

Purple BadgeOrange BadgeTeal BadgeGradient Badge

API Reference

Complete list of props for the Badge component.

Props

PropTypeDefaultDescription
variant'solid' | 'soft' | 'outline''soft'Visual style variant of the badge
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''primary'Color theme of the badge
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size of the badge
radius'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full''md'Border radius style
classNamestring-Additional CSS classes
childrenReact.ReactNode-Content to display inside the badge

Accessibility

  • Badges are semantic HTML elements (span) for inline content
  • Use appropriate color contrast for text readability
  • For interactive badges, wrap in a button element with proper ARIA labels
  • Avoid relying solely on color to convey meaning - use text or icons
  • Keep badge text concise and descriptive