Tag

Short labels for marking and categorization, with optional close button.

Basic Usage

import { Tag } from '@airo-ui/react'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Tag>Vue</Tag>
      <Tag>React</Tag>
      <Tag>Svelte</Tag>
    </div>
  )
}

Closable

import { useState } from 'react'
import { Tag } from '@airo-ui/react'

function Demo() {
  const [tags, setTags] = useState(['Vue', 'React', 'Svelte'])

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {tags.map((tag) => (
        <Tag
          key={tag}
          closable
          onClose={() => setTags(tags.filter((t) => t !== tag))}
        >
          {tag}
        </Tag>
      ))}
      {tags.length === 0 && (
        <span style={{ fontSize: 13, color: 'var(--color-neutral-500)' }}>All closed</span>
      )}
    </div>
  )
}

API

Props

Name	Type	Default	Description
closable	boolean	false	Show close button
disabled	boolean	false	Disabled
children	React.ReactNode	--	Tag text content
onClose	() => void	--	Close handler

Interaction

• Close animation: scale(0.85) + opacity(0) fade out
• Duration 220ms, matching --duration-base