Component
Edit this pageNeo Badge
Compact labels for status, tags, and categories. Hard borders and shadows make them pop off the screen.
01 Installation
Copy the source code below into your project.
Source Code
New Component
src/components/neo/
NeoBadge.tsx
Or switch to the "Code" tab to view manually
02 Basic Usage
Simple Badges
New ArrivalFeaturedDocs v2.0
03 Variants
Includes semantic colors for common status indicators.
Color Variants
PrimarySecondaryOutlineSuccessWarningDangerNeutral
04 With Icons
Icon Badges
WinnerDeveloperPro PlanVerified
05 Real World Example
User Profile
Alex_Dev
Lvl 99Admin
Achievements
ReactTypeScriptNext.jsHot StreakTop 1%
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The text content of the badge. |
| variant | string | "primary" | The visual style (color scheme) of the badge. |
| size | "sm" | "md" | "lg" | "md" | Controls padding and text size. |
| icon | ElementType | undefined | Optional icon component displayed before the text. |