Badge

The Badge component is a pixel-art styled label indicator.
It supports multiple variants, sizes, and dismissible behavior — perfect for status indicators, tags, and notifications with a retro aesthetic.

🚀 Usage

Basic Example

Primary


import { Badge } from "pixelartui-react";
 
<Badge text="Primary" variant="primary" />

Variants

Primary

Success

Error

Warning

Info


<Badge text="Primary" variant="primary" />
<Badge text="Success" variant="success" />
<Badge text="Error" variant="error" />
<Badge text="Warning" variant="warning" />
<Badge text="Info" variant="info" />

Sizes

Small

Medium

Large


<Badge text="Small" size="small" />
<Badge text="Medium" size="medium" />
<Badge text="Large" size="large" />

Dismissible

Dismiss me


<Badge
    text="Dismiss me"
    variant="info"
    dismissible
    onDismiss={() => console.log("dismissed")}
/>

Styles

Dark style

Light style


<Badge text="Dark style" badgeStyle="dark" />
 
<Badge text="Light style" badgeStyle="light" />

🔧 Props

Prop	Type	Default	Description
`text`	`string`	—	The badge text content.
`size`	`"small" \| "medium" \| "large"`	`"medium"`	Size of the badge.
`variant`	`"primary" \| "success" \| "error" \| "warning" \| "info"`	`"primary"`	The visual variant of the badge.
`badgeStyle`	`"dark" \| "light"`	`"dark"`	Applies a light or dark theme to the component.
`dismissible`	`boolean`	`false`	Shows a dismiss button when true.
`onDismiss`	`() => void`	`undefined`	Callback fired when the dismiss button is clicked.
`className`	`string`	`undefined`	Adds additional CSS classes for custom styling.