WinBadge

A small rectangular label with bold text and a raised bevel. Can render as a link or disabled state.

When to use

Use WinBadge for status labels, tags, categories, or small metadata indicators.

When not to use

Do not use WinBadge for primary navigation or interactive controls. Use WinButton instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinBadge } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default badge

ActivePendingArchivedComplete

Badge as link

Documentation API Reference Changelog

Disabled badge

DeprecatedRemoved

Props

All available props for the WinBadge component.

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Label content.
`href`	`string`	`—`	If provided, renders as an <a> link.
`disabled`	`boolean`	`false`	If true, uses inset border and muted text.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinBadge } from 'win2k-ui'

export function Example() {
  return (
    <div className="flex gap-2">
      <WinBadge>Active</WinBadge>
      <WinBadge href="/docs">Documentation</WinBadge>
      <WinBadge disabled>Archived</WinBadge>
    </div>
  )
}