Tag

Etiquetas para categorizar, marcar y organizar contenido.

Importación

import { Tag } from 'asterui'

Ejemplos

Etiquetas Básicas

Etiquetas simples con colores predefinidos.

DefaultPrimarySecondaryAccentInfoSuccessWarningError

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag>Default</Tag>
        <Tag color="primary">Primary</Tag>
        <Tag color="secondary">Secondary</Tag>
        <Tag color="accent">Accent</Tag>
        <Tag color="info">Info</Tag>
        <Tag color="success">Success</Tag>
        <Tag color="warning">Warning</Tag>
        <Tag color="error">Error</Tag>
      </Space>
    )
}

export default App

Variantes

Diferentes variantes de estilo para etiquetas.

FilledOutlinedSoftDash

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" variant="filled">Filled</Tag>
        <Tag color="primary" variant="outlined">Outlined</Tag>
        <Tag color="primary" variant="soft">Soft</Tag>
        <Tag color="primary" variant="dash">Dash</Tag>
      </Space>
    )
}

export default App

Etiquetas Cerrables

Etiquetas que pueden ser cerradas por el usuario.

Tag 1Tag 2Tag 3

import { Tag, Space, TagLiveRegion } from 'asterui'
import { useState } from 'react'

function App() {
  const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
  
  const handleClose = (tag: string) => {
    setTags(tags.filter((t) => t !== tag));
  };
  
  return (
      <TagLiveRegion />
      <Space size="sm" wrap>
        {tags.map((tag) => (
          <Tag
            key={tag}
            closable
            color="primary"
            onClose={() => handleClose(tag)}
          >
            {tag}
          </Tag>
        ))}
      </Space>
    )
}

export default App

Etiquetas con Iconos

Añade iconos a las etiquetas para mejor comunicación visual.

ApprovedPending

import { Tag, Space } from 'asterui'
import { CheckCircleIcon, ExclamationCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="success" icon={<CheckCircleIcon size="sm" />}>
          Approved
        </Tag>
        <Tag color="warning" icon={<ExclamationCircleIcon size="sm" />}>
          Pending
        </Tag>
      </Space>
    )
}

export default App

Tamaños de Etiqueta

Cinco tamaños disponibles para etiquetas.

Extra SmallSmallMediumLargeExtra Large

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" align="center" wrap>
        <Tag color="primary" size="xs">Extra Small</Tag>
        <Tag color="primary" size="sm">Small</Tag>
        <Tag color="primary" size="md">Medium</Tag>
        <Tag color="primary" size="lg">Large</Tag>
        <Tag color="primary" size="xl">Extra Large</Tag>
      </Space>
    )
}

export default App

Colores Personalizados

Usa colores hexadecimales personalizados para estilo único.

RedBlueGreenCyanCrimson

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="#f50">Red</Tag>
        <Tag color="#2db7f5">Blue</Tag>
        <Tag color="#87d068">Green</Tag>
        <Tag color="#108ee9">Cyan</Tag>
        <Tag color="#f5222d">Crimson</Tag>
      </Space>
    )
}

export default App

Etiquetas como Enlaces

Etiquetas que navegan a URLs.

GitHub Documentation

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" href="https://github.com" target="_blank">
          GitHub
        </Tag>
        <Tag color="info" href="/docs">
          Documentation
        </Tag>
      </Space>
    )
}

export default App

Etiquetas Deshabilitadas

Etiquetas con estado deshabilitado.

Disabled TagDisabled ClosableDisabled Checkable

import { Tag, CheckableTag, Space } from 'asterui'

function App() {
  return (
      <Space size="sm" wrap>
        <Tag color="primary" disabled>Disabled Tag</Tag>
        <Tag color="primary" closable disabled>Disabled Closable</Tag>
        <CheckableTag disabled>Disabled Checkable</CheckableTag>
      </Space>
    )
}

export default App

Etiquetas Seleccionables

Etiquetas que pueden activarse y desactivarse.

ReactVueAngularSvelte

import { CheckableTag, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedTags, setSelectedTags] = useState<string[]>(['React']);
  
  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    setSelectedTags(nextSelectedTags);
  };
  
  const tags = ['React', 'Vue', 'Angular', 'Svelte'];
  
  return (
      <Space size="sm" wrap>
        {tags.map((tag) => (
          <CheckableTag
            key={tag}
            checked={selectedTags.includes(tag)}
            onChange={(checked) => handleChange(tag, checked)}
          >
            {tag}
          </CheckableTag>
        ))}
      </Space>
    )
}

export default App

Colores de Etiquetas Seleccionables

Etiquetas seleccionables con diferentes colores y tamaños.

SuccessWarningError

import { CheckableTag, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState([true, false, false]);
  
  return (
      <Space size="sm" wrap>
        <CheckableTag
          checked={checked[0]}
          onChange={(c) => setChecked([c, checked[1], checked[2]])}
          color="success"
          size="sm"
        >
          Success
        </CheckableTag>
        <CheckableTag
          checked={checked[1]}
          onChange={(c) => setChecked([checked[0], c, checked[2]])}
          color="warning"
          size="md"
        >
          Warning
        </CheckableTag>
        <CheckableTag
          checked={checked[2]}
          onChange={(c) => setChecked([checked[0], checked[1], c])}
          color="error"
          size="lg"
        >
          Error
        </CheckableTag>
      </Space>
    )
}

export default App

Etiquetas Seleccionables con Iconos

Añade iconos a etiquetas seleccionables.

LikeStarSave

import { CheckableTag, Space } from 'asterui'
import { HeartIcon, StarIcon, BookmarkIcon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [liked, setLiked] = useState(false);
  const [starred, setStarred] = useState(true);
  const [saved, setSaved] = useState(false);
  
  return (
      <Space size="sm" wrap>
        <CheckableTag
          checked={liked}
          onChange={setLiked}
          icon={<HeartIcon size="sm" />}
        >
          Like
        </CheckableTag>
        <CheckableTag
          checked={starred}
          onChange={setStarred}
          icon={<StarIcon size="sm" />}
        >
          Star
        </CheckableTag>
        <CheckableTag
          checked={saved}
          onChange={setSaved}
          icon={<BookmarkIcon size="sm" />}
        >
          Save
        </CheckableTag>
      </Space>
    )
}

export default App

Casos de Uso

Ejemplos prácticos de uso de etiquetas.

Categories:ReactTypeScriptUI

Status:ActivePendingExpired

import { Tag, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        {/* Article tags */}
        <Space size="sm" align="center">
          <span className="text-sm text-base-content/70">Categories:</span>
          <Tag color="primary">React</Tag>
          <Tag color="secondary">TypeScript</Tag>
          <Tag color="accent">UI</Tag>
        </Space>
  
        {/* Status indicators */}
        <Space size="sm" align="center">
          <span className="text-sm text-base-content/70">Status:</span>
          <Tag color="success">Active</Tag>
          <Tag color="warning">Pending</Tag>
          <Tag color="error">Expired</Tag>
        </Space>
      </Space>
    )
}

export default App

API

`Tag`

Propiedad	Descripción	Tipo	Predeterminado
`closable`	Mostrar icono de cerrar y habilitar cierre	`boolean`	`false`
`closeIcon`	Elemento de icono de cierre personalizado	`ReactNode`	`-`
`onClose`	Callback cuando se cierra la etiqueta	`() => void`	`-`
`color`	Color de etiqueta (predefinido o hexadecimal personalizado)	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'ghost' \| string`	`-`
`icon`	Elemento de icono a mostrar antes del texto	`ReactNode`	`-`
`size`	Tamaño de etiqueta	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`variant`	Variante de estilo de etiqueta	`'filled' \| 'outlined' \| 'soft' \| 'dash'`	`'filled'`
`visible`	Estado de visibilidad controlado	`boolean`	`-`
`disabled`	Deshabilitar interacciones	`boolean`	`false`
`href`	Renderizar etiqueta como enlace	`string`	`-`
`target`	Destino del enlace (cuando href está establecido)	`string`	`-`
`children`	Contenido de la etiqueta	`ReactNode`	`-`
`className`	Clases CSS adicionales	`string`	`-`
`data-testid`	ID de prueba para el componente	`string`	`'tag'`
`aria-label`	Etiqueta accesible (usada en anuncio del botón de cerrar)	`string`	`-`

`CheckableTag`

Propiedad	Descripción	Tipo	Predeterminado
`checked`	Si la etiqueta está marcada	`boolean`	`false`
`onChange`	Callback cuando cambia el estado de marcado	`(checked: boolean) => void`	`-`
`icon`	Elemento de icono a mostrar antes del texto	`ReactNode`	`-`
`size`	Tamaño de etiqueta	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`color`	Color de etiqueta cuando está marcada	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'ghost'`	`'primary'`
`disabled`	Deshabilitar interacciones	`boolean`	`false`
`children`	Contenido de la etiqueta	`ReactNode`	`-`
`className`	Clases CSS adicionales	`string`	`-`
`data-testid`	ID de prueba para el componente	`string`	`'checkable-tag'`

Accesibilidad

El botón de cerrar incluye aria-label descriptivo (ej. “Eliminar Etiqueta 1”)
CheckableTag usa role="checkbox" con estado aria-checked adecuado
Accesible por teclado - las acciones de cerrar y alternar funcionan con Enter/Space
Indicadores de foco visibles en todos los elementos interactivos
TagLiveRegion anuncia eliminaciones de etiquetas a lectores de pantalla
Atributo aria-disabled establecido cuando está deshabilitado
El contraste de color cumple con las directrices WCAG para colores predefinidos