Badge

Installation#

npmpnpmyarnbun

npx sugarcoat add badge

Examples#

Default#

Default

Sizes#

Available in four sizes to fit different UI contexts.

Sizes

Colors#

Badges support multiple color palettes for semantic meaning.

Colors

Semantic Colors#

Use semantic colors to convey status.

Semantic Colors

Interactive#

Enable hover and click interactions with the interactive prop.

Interactive

Block Width#

Use the block prop to make a badge span the full width.

Block Width

With Icons#

Combine badges with icons for enhanced visual communication.

With Icons

As Notification Count#

Notification Count

Status Indicators#

Status Indicators

Polymorphism#

Use the as prop to render as a different element.

As Link

Usage#

Import

import { Badge } from "@sugarcoat/ui-nxt";

Usage

<Badge size="sm" color="primary" interactive>
New Feature
</Badge>

Props#

Prop	Type	Default	Description
size	"xs" \| "sm" \| "md" \| "lg"	"sm"	Size of the badge
color	"default" \| "neutral" \| "primary" \| "accent" \| "success" \| "warning" \| "danger" \| "info"	"default"	Color palette for the badge
interactive	boolean	false	Enable hover and click interactions
block	boolean	false	Whether the badge spans full width
as	ElementType	"span"	Change the underlying element type (polymorphism)
render	ReactElement \| ((props) => ReactElement)	-	Render as a custom element with full prop forwarding
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax

Accessibility#

Uses <span> element by default, which is appropriate for inline content
When using as prop to make interactive (e.g., links or buttons), ensure proper semantics
Color alone should not be the only way to convey information
Consider adding visually hidden text for screen readers when using icon-only badges