Badge

A small, enclosed text element used to represent status.

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.

Default

Info

Success

Warning

Error

Brand

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

export default () => (
  <div className="flex gap-2">
    <Badge>Default</Badge>
    <Badge variant="info">Info</Badge>
    <Badge variant="success">Success</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="error">Error</Badge>
    <Badge variant="brand">Brand</Badge>
  </div>
);

Icons

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

Icons

Verified

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

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

End Icons

Translated by AI

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

export default () => (
  <Badge variant="brand" iconEnd={faSparkle} size="lg">
    Translated by AI
  </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>
);

Placement

Place a badge above, below, or to either side of the element it labels — never floating over it. Badges are transparent, so overlapping elements will bleed through.

Don't

Beta

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

<Button variant="secondary" icon={faLocationArrow}>
  Guide Me
  <Badge variant="brand" size="sm">
    Beta
  </Badge>
</Button>;

API Reference

`Badge`

A small, enclosed text element used to represent status.

`icon`

IconDefinition

Icon shown before the label.

`iconClassName`

string

Classes applied to the start icon.

`iconEnd`

IconDefinition

Icon shown after the label.

`iconEndClassName`

string

Classes applied to the end icon.

`size`

"sm" | "lg" = "sm"

Height and padding: sm (compact) or lg.

`theme`

"light" | "dark"

Theme for contrast; affects icon color when set.

`variant`

Background and text color: default (gray), info, success, warning, error, or brand.