Components

Badge

Small status or count label: six tones in soft, solid and outline variants, all at 4.5:1 contrast or more.

NewBeta3

Usage

Use it to:

  • mark something as new, beta or changed
  • show a status or an unread count next to a title or nav item

Don’t use it to:

  • user-defined categories (use Tag)
  • actions (use Button)
  • long text (use Alert or Callout)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/BadgeExample.tsx
import { Badge } from '@krackedui/motion';

export function BadgeDemo() {
  return (
    <>
      <Badge tone="accent">New</Badge>
      <Badge>Beta</Badge>
      <Badge variant="solid" tone="danger">3</Badge>
    </>
  );
}

Examples

Tones

NeutralAccentSuccessWarningDangerInfo

Variants

NeutralAccentSuccessWarningDangerInfo
NeutralAccentSuccessWarningDangerInfo
NeutralAccentSuccessWarningDangerInfo

Count

A count badge is variant="solid" tone="danger". Give the number context with aria-label.

Inbox4

Dark theme

NewDone3Due

API Reference

Badge

A <span>; supports all of its props. Adds:

PropTypeDefault
tone
"neutral""accent""success""warning""danger""info"
"neutral"
variant
"soft""solid""outline"
"soft"

Accessibility

  • Static text: the words carry the meaning, color only reinforces it.
  • For counts, add aria-label (“4 unread”) so the number is understandable on its own.
© 2026 Motion. Internal documentation.