Badge

Small status label for counts, tags, and state indicators.

stable
since v0.1.0
0.97 kB
feedback
label
status

Preview

tsx

import { Badge } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Badge>New</Badge>;
}

Variants

Badge ships four visual variants — solid, soft (default), outline, and ghost — each available in six color schemes: accent, neutral, success, warning, danger, and info.

Preview

Open

tsx

import { Badge } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Badge variant="solid" colorScheme="accent">
        Solid
      </Badge>
      <Badge variant="soft" colorScheme="success">
        Soft
      </Badge>
      <Badge variant="outline" colorScheme="warning">
        Outline
      </Badge>
      <Badge variant="ghost" colorScheme="danger">
        Ghost
      </Badge>
      <Badge variant="solid" colorScheme="info">
        Info
      </Badge>
      <Badge variant="soft" colorScheme="neutral">
        Neutral
      </Badge>
    </div>
  );
}

Dot indicator

Pass dot to render a bare coloured dot with no text content. Supply an aria-label to keep the indicator accessible.

Preview

Open

tsx

import { Badge } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', alignItems: 'center' }}>
      <Badge dot colorScheme="success" aria-label="Online" />
      <Badge dot colorScheme="warning" aria-label="Away" />
      <Badge dot colorScheme="danger" aria-label="Offline" />
      <Badge dot colorScheme="neutral" aria-label="Unknown" />
    </div>
  );
}

API

PropTypeDefaultDescription

variant

"solid"|"soft"|"outline"|"ghost"

soft

Visual style. `soft` reads as informational; `solid` draws more attention; `outline` is minimal; `ghost` is borderless.

colorScheme

neutral

Semantic palette. One of `neutral`, `accent`, `success`, `warning`, `danger`, `info`.

size

"xs"|"sm"|"md"

Pixel scale. One of `xs`, `sm`, `md`.

shape

"default"|"pill"|"square"

default

Outline shape. `default` is gently rounded; `pill` is fully rounded; `square` has no corner rounding.

icon

ReactNode

—

Leading icon rendered before the children.

dot

boolean

false

Render as a bare coloured dot (no content).

Accessibility

Rendered as a native <span> — purely presentational by default.
In dot mode with no children, aria-hidden="true" is set automatically. Add an explicit aria-label when the dot conveys meaningful information (e.g. online status).
Colour alone is never the only signal — pair with a visible label or aria-label for colour-blind users.

Recipes

Use shape="pill" for rounded pill badges (e.g. notification counts).
Use shape="square" for icon-only square badges.
Use icon prop to prepend a decorative icon: <Badge icon={<StarIcon />}>Featured</Badge>.
Combine size="xs" with dot for tight inline status dots next to usernames or connection states.