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.

See our colors!

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.

Prop	Type	Default	Description
appearance	muted	—	Defines the visual style of the `Badge`. Currently only supports the `muted` variant.
asChild	boolean	false	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	ReactNode	—	An icon to render inside the badge. Will be automatically sized for you.