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