0.16.1

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

Composition

When you want to render something else as a Badge, you can use the asChild prop to compose. This is useful when you want to splat the Badge styling onto a Link from remix or react-router.

import { Badge } from "@ngrok/mantle/badge";
import { GlobeHemisphereWest } from "@phosphor-icons/react/GlobeHemisphereWest";
import { Link } from "react-router-dom";

}>
	See our colors!

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.

asChild

booleanfalse

Use the asChild prop to compose the Badge styling and functionality onto alternative element types or your own React components.

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

ReactNodeAn icon to render inside the badge. Will be automatically sized for you.