Tag

Labels para categorizar, marcar e organizar conteúdo.

Importação

import { Tag } from 'asterui'

Exemplos

Tags Básicas

Tags simples com cores predefinidas.

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 tags.

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

Tags Fecháveis

Tags que podem ser fechadas pelo usuário.

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

Tags com Ícones

Adicione ícones às tags para melhor comunicação 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

Tamanhos de Tag

Cinco tamanhos disponíveis para tags.

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

Cores Personalizadas

Use cores hex personalizadas 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

Tags como Links

Tags que navegam para 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

Tags Desabilitadas

Tags com estado desabilitado.

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

Tags Selecionáveis

Tags que podem ser ativadas e desativadas.

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

Cores de Tags Selecionáveis

Tags selecionáveis com diferentes cores e tamanhos.

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

Tags Selecionáveis com Ícones

Adicione ícones a tags selecionáveis.

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

Exemplos práticos de uso de tags.

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`

Propriedade	Descrição	Tipo	Padrão
`closable`	Mostrar ícone de fechar e habilitar fechamento	`boolean`	`false`
`closeIcon`	Elemento de ícone de fechar personalizado	`ReactNode`	`-`
`onClose`	Callback quando a tag é fechada	`() => void`	`-`
`color`	Cor da tag (predefinida ou hex personalizado)	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'ghost' \| string`	`-`
`icon`	Elemento de ícone a exibir antes do texto	`ReactNode`	`-`
`size`	Tamanho da tag	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`variant`	Variante de estilo da tag	`'filled' \| 'outlined' \| 'soft' \| 'dash'`	`'filled'`
`visible`	Estado de visibilidade controlado	`boolean`	`-`
`disabled`	Desabilitar interações	`boolean`	`false`
`href`	Renderizar tag como link	`string`	`-`
`target`	Destino do link (quando href está definido)	`string`	`-`
`children`	Conteúdo da tag	`ReactNode`	`-`
`className`	Classes CSS adicionais	`string`	`-`
`data-testid`	ID de teste para o componente	`string`	`'tag'`
`aria-label`	Label acessível (usado no anúncio do botão fechar)	`string`	`-`

`CheckableTag`

Propriedade	Descrição	Tipo	Padrão
`checked`	Se a tag está marcada	`boolean`	`false`
`onChange`	Callback quando o estado marcado muda	`(checked: boolean) => void`	`-`
`icon`	Elemento de ícone a exibir antes do texto	`ReactNode`	`-`
`size`	Tamanho da tag	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`color`	Cor da tag quando marcada	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error' \| 'ghost'`	`'primary'`
`disabled`	Desabilitar interações	`boolean`	`false`
`children`	Conteúdo da tag	`ReactNode`	`-`
`className`	Classes CSS adicionais	`string`	`-`
`data-testid`	ID de teste para o componente	`string`	`'checkable-tag'`

Acessibilidade

Botão de fechar inclui aria-label descritivo (ex. “Remover Tag 1”)
CheckableTag usa role="checkbox" com estado aria-checked adequado
Acessível por teclado - ações de fechar e alternar funcionam com Enter/Space
Indicadores de foco visíveis em todos os elementos interativos
TagLiveRegion anuncia remoções de tags para leitores de tela
Atributo aria-disabled definido quando desabilitado
Contraste de cor atende às diretrizes WCAG para cores predefinidas