0.4.0

Theme Switcher

Badge

A Badge is a non-interactive component used to highlight important information or to visually indicate the status of an item.

  • Muted amberMuted amber
  • Muted blueMuted blue
  • Muted cyanMuted cyan
  • Muted emeraldMuted emerald
  • Muted fuchsiaMuted fuchsia
  • Muted grayMuted gray
  • Muted greenMuted green
  • Muted indigoMuted indigo
  • Muted limeMuted lime
  • Muted orangeMuted orange
  • Muted pinkMuted pink
  • Muted purpleMuted purple
  • Muted redMuted red
  • Muted roseMuted rose
  • Muted skyMuted sky
  • Muted tealMuted teal
  • Muted violetMuted violet
  • Muted yellowMuted yellow
  • Muted accentMuted accent
  • Muted dangerMuted danger
  • Muted neutralMuted neutral
  • Muted successMuted success
  • Muted warningMuted warning
import { Badge } from "@ngrok/mantle/badge";
import { GlobeHemisphereWest } from "@phosphor-icons/react/GlobeHemisphereWest";


	Muted neutral

}>
	Muted neutral

API Reference

The Badge accepts the following props in addition to the standard HTML span attributes.

PropTypeDefaultDescription

appearance

  • muted
—

Defines the visual style of the Badge. Currently only supports the muted variant.

color

  • amber
  • blue
  • cyan
  • emerald
  • fuchsia
  • gray
  • green
  • indigo
  • lime
  • orange
  • pink
  • purple
  • red
  • rose
  • sky
  • teal
  • violet
  • yellow
  • accent
  • danger
  • neutral
  • success
  • warning
neutral

The color variant of the Badge. Supports all named colors, both functional and from the color palette.

icon

ReactNode—An icon to render inside the badge. Will be automatically sized for you.