Étiquette

Labels pour catégoriser, marquer et organiser le contenu.

Importation

import { Tag } from 'asterui'

Exemples

Étiquettes de base

Étiquettes simples avec couleurs prédéfinies.

</>

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

Différentes variantes de style pour les étiquettes.

</>

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

Étiquettes fermables

Étiquettes qui peuvent être fermées par l'utilisateur.

</>

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

Étiquettes avec icônes

Ajouter des icônes aux étiquettes pour une meilleure communication visuelle.

</>

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

Tailles d'étiquettes

Cinq tailles disponibles pour les étiquettes.

</>

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

Couleurs personnalisées

Utiliser des couleurs hexadécimales personnalisées pour un style unique.

</>

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

Étiquettes liens

Étiquettes qui naviguent vers des URLs.

</>

GitHubDocumentation

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

Étiquettes désactivées

Étiquettes avec état désactivé.

</>

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

Étiquettes cochables

Étiquettes qui peuvent être activées et désactivées.

</>

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

Couleurs d'étiquettes cochables

Étiquettes cochables avec différentes couleurs et tailles.

</>

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

Étiquettes cochables avec icônes

Ajouter des icônes aux étiquettes cochables.

</>

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

Cas d'utilisation

Exemples pratiques d'utilisation des étiquettes.

</>

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

Propriété	Description	Type	Défaut
closable	Afficher l’icône de fermeture et activer la fermeture	boolean	false
closeIcon	Élément d’icône de fermeture personnalisé	ReactNode	-
onClose	Callback lorsque l’étiquette est fermée	() => void	-
color	Couleur de l’étiquette (prédéfinie ou hexadécimale personnalisée)	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | string	-
icon	Élément d’icône à afficher avant le texte	ReactNode	-
size	Taille de l’étiquette	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
variant	Variante de style de l’étiquette	'filled' | 'outlined' | 'soft' | 'dash'	'filled'
visible	État de visibilité contrôlé	boolean	-
disabled	Désactiver les interactions	boolean	false
href	Rendre l’étiquette comme un lien	string	-
target	Cible du lien (lorsque href est défini)	string	-
children	Contenu de l’étiquette	ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour le composant	string	'tag'
aria-label	Label accessible (utilisé dans l’annonce du bouton de fermeture)	string	-

CheckableTag

Propriété	Description	Type	Défaut
checked	Si l’étiquette est cochée	boolean	false
onChange	Callback lorsque l’état coché change	(checked: boolean) => void	-
icon	Élément d’icône à afficher avant le texte	ReactNode	-
size	Taille de l’étiquette	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
color	Couleur de l’étiquette lorsqu’elle est cochée	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost'	'primary'
disabled	Désactiver les interactions	boolean	false
children	Contenu de l’étiquette	ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour le composant	string	'checkable-tag'

Accessibilité

• Le bouton de fermeture inclut un aria-label descriptif (par ex., “Supprimer Étiquette 1”)
• CheckableTag utilise role="checkbox" avec un état aria-checked approprié
• Accessible au clavier - les actions de fermeture et de bascule fonctionnent avec Entrée/Espace
• Indicateurs de focus visibles sur tous les éléments interactifs
• TagLiveRegion annonce les suppressions d’étiquettes aux lecteurs d’écran
• Attribut aria-disabled défini lorsque désactivé
• Le contraste des couleurs respecte les directives WCAG pour les couleurs prédéfinies