Tags

import { Tags } from '@hanzo/ui'

Default

A wrapping row of labels with no remove affordance.

ReactTypeScriptNext.jsTailwind CSS

export function Default() {
  return <Tags tags={STACK} />
}

Variants

The same list rendered in each badge variant.

ReactTypeScriptNext.jsTailwind CSS

export function Variants() {
  return (
    <YStack gap="$3">
      <Tags tags={STACK} variant="default" />
      <Tags tags={STACK} variant="secondary" />
      <Tags tags={STACK} variant="outline" />
      <Tags tags={STACK} variant="destructive" />
    </YStack>
  )
}

Removable

Pass `onRemove` to grow each badge a close button.

ReactTypeScriptNext.jsTailwind CSS

export function Removable() {
  const [tags, setTags] = useState(STACK)
  return (
    <XStack minH={40} items="center">
      <Tags
        tags={tags}
        variant="secondary"
        onRemove={(id) => setTags((current) => current.filter((tag) => tag.id !== id))}
      />
    </XStack>
  )
}

Types

export type Tag = {
  id: string
  label: string
}

export type TagsProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
  tags: Tag[]
  onRemove?: (id: string) => void
  variant?: BadgeVariant | null
}

Exports

Tagstype Tagtype TagsProps