Skip to content
Docs
Components
Primitives
Badge

Badge

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

Imports

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

Usage

Badge variants

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

Badge Sizes

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

Badge Themes

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

💡

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.

API Reference

Prop

Type

Default

sizeunionmd
variantunionsolid
themeColoruniondefault
prefixReact.ReactNode-
Last updated on June 6, 2023