A non-interactive component used to highlight important information or to visually indicate the status of an item.
import { Badge } from "@ngrok/mantle/badge";
import { GlobeHemisphereWestIcon } from "@phosphor-icons/react/GlobeHemisphereWest";
<Badge appearance="muted" color="neutral">
Muted neutral
</Badge>
<Badge appearance="muted" color="neutral" icon={<GlobeHemisphereWestIcon />}>
Muted neutral
</Badge>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 react-router Link.
import { Badge } from "@ngrok/mantle/badge";
import { GlobeHemisphereWestIcon } from "@phosphor-icons/react/GlobeHemisphereWest";
import { Link, href } from "react-router";
<Badge appearance="muted" asChild color="pink" icon={<GlobeHemisphereWestIcon />}>
<Link to={href("/base/colors")}>See our colors!</Link>
</Badge>;All props from span, plus: