Components
Badge

Badge Variants

The Badge component in sidcn supports various visual styles, or variants. Each variant comes with its own background color to provide a distinct look. Here's a detailed explanation of each variant:

HelloHello

Add Badge

npx sidcn add Badge

Reset Cache

yarn start --clear // yarn
 
npm start -- --reset-cache // npm

Import Badge

import { Badge } from '/components/sidcn/ui/badge'

Primary Variant

<Badge variant="primary" />

Background Color: #000000

Secondary Variant

<Badge variant="secondary" />

Background Color: #f1f1f3

Destructive Variant

<Badge variant="destructive" />

Background Color: #d10e1d

Outline Variant

<Badge variant="outline" />

Background Color: #fff

Link Variant

<Badge variant="link" />

Class Name

  • Applies Tailwind CSS classes to control both text and Badge style properties.

  • For the Badge component, you can use Tailwind CSS classes that map to the following styles:

<Badge
  variant="primary"
  className="px-8 my-4 border border-[#ff0000] text-[20px]"
  onPress={() => {}}
>
  Press Me
</Badge>
AvatarBottom Sheet