Tailwind CSS Badge - Nira UI

Nira UI Badges are versatile UI elements that highlight important information, statuses, or counts.

Default Badge

A simple, rounded badge.

Badge

Squared Badge

Use rounded-none to create a square-shaped badge

Badge

Badge Colors

Highlight badges with contextual colors.

Badge
Badge
Badge
Badge
Badge

Transparent Badges

Use transparent badges for subtle notifications.

Badge
Badge
Badge
Badge
Badge

Outline Badge

Create badges with border outlines.

Badge
Badge
Badge
Badge
Badge

Badges with Icons

Combine icons and text for status badges.

Connected

   

Attention
   


Passkey Required
   


Loading
   


Disabled
  

Transparent Badges with Icons

Transparent Badges with Icons

Connected

   

Attention
   


Passkey Required
   


Loading
   


Disabled