Badge

Usage

import { Badge } from '@bit/ui'

<Badge variant='outline'>Button</Badge>

Link

You can use the badgeVariants helper to create a link that looks like a button.

import { badgeVariants } from '@bit/ui'

<Link className={badgeVariants({ variant: 'outline' })}>Click here</Link>

Examples

Variants

Use sparingly when you really need to call attention to something.

Soft Variants

Use when there are a lot of badges on the page (e.g. tables). The softer palette cuts some on visual noise.

Outline Variants