Brand Badge

New

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

Usage

ProPro TeamTeamProEnt

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

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

Dark mode

When displayed on a dark background, pass in theme="dark".

ProPro TeamTeamProEnt

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

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

API Reference

`BrandBadge`

Inherits properties from HTMLButtonElement.

Prop	Type	Default
`className`	`string`
`isIconHidden`	`boolean`	`false`
`onClick`	`() => void`
`theme`	`"light""dark"`	`"light"`
`type`	`"pro""proTeam"team"proTrial""enterprise"`