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

<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

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Badge variant="solid">Solid</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  );
};

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

export const App = props => {
  return (
    <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

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  );
};

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

export const App = props => {
  return (
    <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

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

export const App = props => {
  return (
    <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>
  );
};

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

export const App = props => {
  return (
    <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.

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

export const App = props => {
  return (
    <div className="space-x-2">
      <Badge prefix={<SlotIcon />}>Search</Badge>
    </div>
  );
};

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

export const App = props => {
  return (
    <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 July 26, 2022

Badge

Imports#

Usage#

Badge variants#

Badge Sizes#

Badge Themes#

Badge prefix#

API Reference#

Imports