Badge

Small status descriptors for UI elements.

PreviousAlert

NextAvatar

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Badge

Small status descriptors for UI elements.

Badges

Status indicators, notification tags, and label chips.

When to use which variant

default / secondaryGeneral metadata tags, category filters, counts descriptions

successCompleted actions, online status, valid forms updates

infoHelpful tips, announcements, secondary updates notes

warningPending actions, warnings, warning alerts thresholds

destructiveErrors, failures, offline statuses, system blocking

neon / gradientCalling interest to sponsored badges or upgraded plans

Interactive Playground

Live CanvasInteractive

New

Controls(5)

variant

select

Visual style of the badge label

size

select

Size dimensions of the badge

dot

boolean

Toggle state:

Show a small status indicator dot

pulse

boolean

Toggle state:

Animate status dot with a pulse effect

children

text

Badge text content

Generated JSX

Source

import { Badge } from "nexoreui"

<Badge>
  New
</Badge>

Showcase & Examples

Default Badge

New Feature

component.tsx

Status Badges (Standard Core)

Default

Secondary

Success

Info

Warning

Destructive

component.tsx

Neon Glow Badge

Premium Glow

component.tsx

Notification Badge

component.tsx

Ribbon Badge

SALE

component.tsx

Page 1 of 3

API Reference (Props)

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "destructive" \| "success" \| "warning" \| "info" \| "outline" \| "gradient" \| "neon"	`"default"`	Visual style of the badge label.
size	"default" \| "sm" \| "lg"	`"default"`	Responsive text scaling.
dot	boolean	`false`	Renders a small status indicator dot on the left.
pulse	boolean	`false`	Enables repeating scaling animation on the status dot.
children*	React.ReactNode	`—`	Text label or element contents.

Accessibility (a11y)

Text Contrast: Text colors are automatically set based on theme guidelines, ensuring readable color contrast ranges for dark and light modes.
Screen Readers: If the badge is representing dynamic count updates (like notifications), ensure a parent element sets aria-live="polite".

PreviousAlert

NextAvatar

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Prop

Type

Default

Description

variant

"default"

Visual style of the badge label.

size

"default" | "sm" | "lg"

"default"

Responsive text scaling.

dot

boolean

false

Renders a small status indicator dot on the left.

pulse

boolean

false

Enables repeating scaling animation on the status dot.

children*

React.ReactNode

—

Text label or element contents.