Badge — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download badge -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<Badge bullet={false} subtle={false} dismissable={false} variant="main">Badge</Badge>

Examples

Main Doc

<Badge bullet={false} subtle={false} dismissable={false} variant="main">Badge</Badge>

Main

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="main"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="main" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="main" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="main" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="main" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="main" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Secondary

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="secondary"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="secondary" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="secondary" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="secondary" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="secondary" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="secondary" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Tertiary

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="tertiary"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="tertiary" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="tertiary" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="tertiary" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="tertiary" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="tertiary" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Brand

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="brand"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="brand" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="brand" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="brand" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="brand" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="brand" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Success

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="success"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="success" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="success" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="success" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="success" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="success" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Warning

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="warning"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="warning" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="warning" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="warning" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="warning" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="warning" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Destructive

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="destructive"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="destructive" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="destructive" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="destructive" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="destructive" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="destructive" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Info

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="info"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="info" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="info" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="info" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="info" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="info" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Highlight

import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";
<div className="flex gap-12 items-center">
  <div className="flex gap-3 items-center">
    <Badge
      variant="highlight"
      subtle={false}
      bullet={false}
    >
      Badge
    </Badge>
    <Badge variant="highlight" subtle={false} bullet={true}>
      88
    </Badge>
    <Badge variant="highlight" subtle={false} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
  <div className="flex gap-3 items-center">
    <Badge variant="highlight" subtle={true} bullet={false}>
      Badge
    </Badge>
    <Badge variant="highlight" subtle={true} bullet={true}>
      88
    </Badge>
    <Badge variant="highlight" subtle={true} bullet={true}>
      <Icon name="CircleDotDashed" />
    </Badge>
  </div>
</div>;

Dismissable

<Badge bullet={false} subtle={false} dismissable>Badge</Badge>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Prop	Type	Default
`asChild`	`boolean`	`false`
`bullet`	`"true" \| "false"`	`—`
`dismissable`	`boolean`	`—`
`onDismiss`	`(event: React.MouseEvent<HTMLButtonElement>) => void`	`—`
`subtle`	`"true" \| "false"`	`—`
`variant`	`"main" \| "default" \| "outline" \| "ghost" \| "link" \| "secondary" \| "destructive" \| "success" \| "tertiary" \| "warning" \| "brand" \| "info" \| "informative" \| "highlight" \| "extendedOne"`	`"default"`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.