Badge

Displays a badge or a component that looks like a badge.

BadgeSecondaryDestructiveOutline
Verified89920+

Installation

CLI

Install the component using the StarUI CLI:

star add badge

Examples

Basic Variants

Default, secondary, outline, and destructive variants

BadgeSecondaryDestructiveOutline

With Icons

Badges enhanced with icons

Featured
Online

Content Types

Numbers, text, and combined content

99+v2.1.0NEW

Link Badges

Interactive badges as links

Status Indicators

Online, offline, and busy status

ActivePendingErrorDraft

Category Tags

Tag items with categories

ReactTypeScriptNext.jsTailwindCSS

Notification Badges

Alert counts on buttons and icons

3
12
99+

Avatar Badges

Status badges on avatars

JD
3
AS
MK
VU

Size Variations

Small and large badge sizes

SmallDefaultLarge

API Reference

Props

Prop Type Default Description
variant Literal['default','secondary','outline','destructive'] 'default' Visual style variant
cls str '' Additional CSS classes