Brand Badge

Usage

BetaProPro TeamTeamProEnt

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

export default () => (
  <div className="flex gap-2">
    <BrandBadge type="beta" />
    <BrandBadge type="pro" />
    <BrandBadge type="proTeam" />
    <BrandBadge type="team" />
    <BrandBadge type="proTrial" />
    <BrandBadge type="enterprise" />
  </div>
);

API Reference

BrandBadge

A small, stylish tag that can be used to mark premium or professional content or users.

type

Required

"addon" | "beta" | "enterprise" | "pro" | "proTrial" | "proTeam" | "team" | "trial"

Label variant to show. Sets the copy and icon; all variants share one color.

---

display

"full" | "labelOnly" | "iconOnly" = "full"

What the badge shows: label and icon, label alone, or the icon alone with the label kept as the accessible name.

---

theme

"light" | "dark" = "light"

Visual theme for the fill and text.

---