Chip

Candidate

Chip est interactif. Il active ou desactive un filtre court dans une liste, un tableau ou un panneau de recherche.

Variants and states

default represente un filtre disponible.
hover renforce la bordure et le fond.
focus-visible affiche un outline clavier.
selected utilise aria-pressed="true".
disabled bloque l’interaction et reduit l’emphase.
la croix tourne de -90deg au survol et au focus avec --motion-duration-base.

La Chip complete est le bouton de suppression du filtre. La croix reste decorative afin d’eviter un bouton imbrique invalide.

Astro

---
import Chip from '../components/ui/Chip.astro';
---

<Chip name="audience" value="retail" aria-label="Retirer le filtre Retail">Retail</Chip>
<Chip selected name="audience" value="premium" aria-label="Retirer le filtre Premium shoppers">Premium shoppers</Chip>

HTML output

<button type="button" class="pixel-chip pixel-chip--selected" aria-pressed="true" aria-label="Retirer le filtre Premium shoppers">
  <span class="pixel-chip__label">Premium shoppers</span>
  <span class="material-symbols-rounded pixel-chip__dismiss" aria-hidden="true">close</span>
</button>

Tokens

--filter-chip-bg-*, --filter-chip-border-*, --filter-chip-fg-*, --filter-chip-padding-*, --filter-chip-gap, --filter-chip-radius, --filter-chip-icon-size, --filter-chip-disabled-opacity, --motion-duration-base, --motion-easing-standard.

Do / Don’t

Do	Don’t
Utiliser Chip pour un filtre binaire court.	Utiliser Chip comme remplacement d’un formulaire complexe.
Exposer selected avec `aria-pressed`.	Signaler la selection uniquement par la couleur.
Limiter le nombre de Chips visibles.	Afficher des dizaines de Chips sans recherche ou regroupement.
Utiliser Tag pour une etiquette non interactive.	Ajouter une interaction a Tag.

Accessibility

Chip rend un bouton natif, utilisable avec Enter et Space. Fournir un aria-label explicite, par exemple Retirer le filtre Retail, car la croix est masquee aux technologies d’assistance. Dans un groupe, fournir un titre ou un fieldset qui explique la dimension filtree.