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.

Default

Success

Warning

Error

Brand

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

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

Dark mode

To display badges in dark mode, pass theme="dark".

Default

Success

Warning

Error

Brand

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

export default () => (
  <div className="flex gap-2">
    <Badge theme="dark">Default</Badge>
    <Badge variant="success" theme="dark">
      Success
    </Badge>
    <Badge variant="warning" theme="dark">
      Warning
    </Badge>
    <Badge variant="error" theme="dark">
      Error
    </Badge>
    <Badge variant="brand" theme="dark">
      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-solid-svg-icons";

export default () => (
  <Badge variant="brand" endIcon={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>
);

API Reference

Badge

Inherits properties from HTMLElement.

Prop	Type	Default
children	ReactNode
className	string
endIcon	IconDefinition
icon	IconDefinition
size	"sm""lg"	"sm"
theme	"light""dark"
variant	"default""success""warning""error""brand"	"default"