Badge

import { Badge, badgeVariants } from '@hanzo/ui'

export function Variants() {
  return (
    <XStack flexWrap="wrap" gap="$3" items="center">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="ghost">Ghost</Badge>
      <Badge variant="link">Link</Badge>
    </XStack>
  )
}

export function AsChild() {
  return (
    <Badge asChild variant="outline">
      <a href="https://www.npmjs.com/package/@hanzo/ui">@hanzo/ui on npm</a>
    </Badge>
  )
}

Types

export type BadgeVariant =
  | 'default'
  | 'secondary'
  | 'destructive'
  | 'outline'
  | 'ghost'
  | 'link'
  | 'inputAdornment'
  | 'tags'

export type BadgeProps = React.ComponentProps<'span'> & {
  variant?: BadgeVariant | null
  asChild?: boolean
}

Exports