Badge

Usage

To display a badge, wrap text in a <Badge>.

New

import { Badge } from "stylus-ui/Badge";

export default () => <Badge>New</Badge>;

Color

Different colors of badges can be displayed by setting the variant.

Light

Dark

Success

Destructive

Brand

import { Badge } from "stylus-ui/Badge";

export default () => (
  <div className="flex gap-2">
    <Badge variant="light">Light</Badge>
    <Badge variant="dark">Dark</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge variant="brand">Brand</Badge>
  </div>
);

Icons

Icons can be displayed within a badge by importing and passing a Font Awesome icon.

Verified

import { Badge } from "stylus-ui/Badge";
import { faCheck } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Badge variant="success" icon={faCheck}>
    Verified
  </Badge>
);

Sizing

Badges can be either small (default) or large.

Small

Large

import { Badge } from "stylus-ui/Badge";
import { faCheck } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex items-center gap-2">
    <Badge icon={faCheck}>Small</Badge>
    <Badge icon={faCheck} size="lg">
      Large
    </Badge>
  </div>
);

API Reference

Badge

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
className	string
icon	IconDefinition
size	"sm""lg"	"sm"
variant	"light""dark""success""destructive""brand"	"light"