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 |
|---|---|---|
size | union | md |
variant | union | solid |
themeColor | union | default |
prefix | React.ReactNode | - |
Last updated on June 6, 2023