Badge

Documentation and examples for the Badge component.

Preview

Default!Success!Failure!warning | mediumOutline | large

Properties

Prop	Type	Default	Description
variant	'default' \| 'success' \| 'failure' \| 'warning' \| 'outline'	"default"	The visual style of the badge.
size	'sm' \| 'md' \| 'xl'	"sm"	The visual size of the badge.
className	string	default classes	Any tailwind classes to modify the look.

Usage

Follow these steps to add and use Badge.

Create next app (skip if you already have setup a next app)

terminal

npx create-next-app@latest --yes

Install

terminal

npx modui-uikit@latest add badge

Implement

typescript

import { Badge } from '@/components/ui/badge'
  
  export default function Example() {
    return (
      <Badge variant="warning" size="md">
        badge of size: medium, variant: warning
      </Badge>
    )
  }