Badge

Badges are used to highlight important information.

badge
tsx
'use client'

import { Badge } from '@nerdfish/ui'

export function BadgeExample() {
	return <Badge>badge</Badge>
}

Usage

tsx
import { Badge } from '@nerdfish/ui'
tsx
<Badge>Badge</Badge>

Examples

Default

badge
tsx
'use client'

import { Badge } from '@nerdfish/ui'

export function BadgeExample() {
	return <Badge>badge</Badge>
}

Secondary

badge
tsx
'use client'

import { Badge } from '@nerdfish/ui'

export function BadgeSecondaryExample() {
	return <Badge variant="secondary">badge</Badge>
}

Danger

badge
tsx
'use client'

import { Badge } from '@nerdfish/ui'

export function BadgeDangerExample() {
	return <Badge variant="danger">badge</Badge>
}

Outline

badge
tsx
'use client'

import { Badge } from '@nerdfish/ui'

export function BadgeOutlineExample() {
	return <Badge variant="outline">badge</Badge>
}

Success

badge
tsx
'use client'

import { Badge } from '@nerdfish/ui'

export function BadgeSuccessExample() {
	return <Badge variant="success">badge</Badge>
}