Skip to main content
ninna-ui
On this page

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@latest
Includes @ninna-ui/core. CSS setup required.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.

Live preview
NeutralPrimarySecondaryAccentInfoSuccessWarningDanger

Soft

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

Live preview
NeutralPrimarySecondaryAccentInfoSuccessWarningDanger

Outline

Badges with transparent background and colored border.

Live preview
NeutralPrimarySecondaryAccentInfoSuccessWarningDanger

Sizes

Badges in different sizes from small to large.

Live preview
XSmallSmallMediumLargeXLarge

Radius

Different border radius options.

Live preview
NoneSmallMediumLargeExtra LargeFull

With Icons

Badges combined with icons for enhanced visual communication.

Live preview
VerifiedRejectedWarningInfo
FeaturedNew
ActiveInactive

Use Cases

Common use cases and patterns for badges.

Live preview

Status Indicators

ActivePendingInactiveDraftArchived

Categories

TechnologyDesignMarketingBusiness

Notification Counts

31299+

Tags

ReactTypeScriptTailwindRemix

Custom

Custom colored badges with dark mode support.

Live preview

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