Badge

Badge is a component that displays an indicator that requires attention. It can also be used to display a status

import { Badge } from "@adaptui/react-tailwind";

Usage

Click me

<Badge>Click me</Badge>

<Badge>Click me</Badge>

Badge variants

Variants can be set using the variant prop. The default variant is solid. The available variants are: solid subtle outline

Solid

Subtle

Outline

<div className="space-x-2">
  <Badge variant="solid">Solid</Badge>
  <Badge variant="subtle">Subtle</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

<div className="space-x-2">
  <Badge variant="solid">Solid</Badge>
  <Badge variant="subtle">Subtle</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Badge Sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg

Small

Medium

Large

<div className="space-x-2">
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>
</div>

<div className="space-x-2">
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>
</div>

Badge Themes

Theme can be set using the theme prop. The default theme is default. The available themes are: default primary secondary success danger

Beta

<div className="flex flex-col space-y-1">
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="default">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="default">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="default">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="primary">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="primary">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="primary">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="secondary">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="secondary">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="secondary">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="success">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="success">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="success">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="danger">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="danger">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="danger">
      Beta
    </Badge>
  </div>
</div>

<div className="flex flex-col space-y-1">
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="default">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="default">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="default">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="primary">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="primary">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="primary">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="secondary">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="secondary">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="secondary">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="success">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="success">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="success">
      Beta
    </Badge>
  </div>
  <div className="space-x-2">
    <Badge size="md" variant="solid" themeColor="danger">
      Beta
    </Badge>
    <Badge size="md" variant="subtle" themeColor="danger">
      Beta
    </Badge>
    <Badge size="md" variant="outline" themeColor="danger">
      Beta
    </Badge>
  </div>
</div>

💡

You can add extra variants, themeColor & sizes via the theme file. Checkout theming guide.

Badge prefix

You can pass prefix props to the badge to prepend any content inside of badge.

<div className="space-x-2">
  <Badge prefix={<SlotIcon />}>Search</Badge>
</div>

<div className="space-x-2">
  <Badge prefix={<SlotIcon />}>Search</Badge>
</div>

API Reference

Prop	Type	Default
`size`	`union`	`md`
`variant`	`union`	`solid`
`themeColor`	`union`	`default`
`prefix`	`React.ReactNode`	-

Last updated on June 6, 2023

Badge

Imports#

Usage#

Badge variants#

Badge Sizes#

Badge Themes#

Badge prefix#

API Reference#

Imports