Badge
Badges are used to highlight important information.
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
tsx
'use client'
import { Badge } from '@nerdfish/ui'
export function BadgeExample() {
return <Badge>badge</Badge>
}
Secondary
tsx
'use client'
import { Badge } from '@nerdfish/ui'
export function BadgeSecondaryExample() {
return <Badge variant="secondary">badge</Badge>
}
Danger
tsx
'use client'
import { Badge } from '@nerdfish/ui'
export function BadgeDangerExample() {
return <Badge variant="danger">badge</Badge>
}
Outline
tsx
'use client'
import { Badge } from '@nerdfish/ui'
export function BadgeOutlineExample() {
return <Badge variant="outline">badge</Badge>
}
Success
tsx
'use client'
import { Badge } from '@nerdfish/ui'
export function BadgeSuccessExample() {
return <Badge variant="success">badge</Badge>
}