Regione Toscana Design System Design System Servizi

Chip: Interactive 

<a href="#" class="rtds-chip rtds-chip--interactive rtds-chip--interactive">
    label</a>
 
{% extends '@chip' %}
{% block classes %}{{ super() }} rtds-chip--interactive{% endblock %}
 
{
  "label": "label",
  "href": "#"
}
  • Content: 
    /**
 * CHIP
 *
*/
.rtds-chip {
    border-radius: 1rem;
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-3);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    font-size: var(--fontsize-text-sm);
        color: var(--color-content-01);
        border-color: var(--color-border-gray-04);
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    border-width: 1px;
}
.rtds-chip--sm {
    border-radius: 0.75rem;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    padding-top: var(--spacing-0-5);
    padding-bottom: var(--spacing-0-5);
    font-size: var(--fontsize-text-xs);
}
.rtds-chip--lg {
    border-radius: 1.5rem;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    font-size: var(--fontsize-text-sm);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
/* Chip category */
.rtds-chip--category {
    border-color: currentColor;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        color: var(--color-content-info);
}
/* Chip link - interactive */
.rtds-chip--interactive {
    background-color: transparent;
}
.rtds-chip--interactive:hover {
        background-color: var(--color-background-02);
    }
.rtds-chip--interactive:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        border-color: var(--color-border-gray-01);
}
.rtds-chip--interactive:active {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background-color: var(--color-background-06);
        border-color: var(--color-border-gray-01);
}
.rtds-chip.is-selected {
        background-color: var(--color-background-06);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.rtds-chip__close {
    border-radius: 9999px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.rtds-chip__close:hover {
        color: var(--color-content-01);
        background-color: var(--color-background-02);
    }
.rtds-chip__close:focus {
        color: var(--color-content-01);
        background-color: var(--color-background-02);
    }
.rtds-chip__close:active {
        color: var(--color-content-01);
        background-color: var(--color-background-02);
    }
.rtds-chip__close::after {
    position: absolute;
    right: var(--spacing-0);
    display: block;
    height: var(--spacing-8);
    width: var(--spacing-8);
    --tw-content: '';
    content: var(--tw-content);
}
.rtds-chip.has-button-close {
    position: relative;
    padding-right: var(--spacing-2);
}
.rtds-chip.has-button-close.rtds-chip--sm {
    padding-right: var(--spacing-2);
}
.rtds-chip.has-button-close.rtds-chip--lg {
    padding-right: var(--spacing-2);
}
/* CHIP STATUS */
.rtds-chip--status.is-open {
    border-color: var(--color-bando-aperto);
    background-color: var(--color-bando-aperto);
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.rtds-chip--status.is-in-progress {
    border-color: var(--color-bando-in-attivazione);
    background-color: var(--color-bando-in-attivazione);
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.rtds-chip--status.is-closed {
    border-color: var(--color-archiviato);
    background-color: var(--color-archiviato);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Other status */
.rtds-chip--status.is-pending {
    border-color: var(--color-error-dark);
    background-color: var(--color-error-dark);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* CHIP FILTER */
.rtds-chip--filter {
        background-color: var(--color-background-06);
    gap: var(--spacing-2);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  • URL: /components/raw/chip/chip.built.css
  • Filesystem Path: components/02-atoms/chip/chip.built.css
  • Size: 4 KB
  • Content: 
    /**
 * CHIP
 *
*/
@layer components {
    .rtds-chip {
        @apply rtds-inline-flex rtds-px-3 rtds-py-1 rtds-items-center rtds-border rtds-text-sm rtds-rounded-2xl rtds-font-bold rtds-border-gray-04 rtds-content-01;
    }

    .rtds-chip--sm {
        @apply rtds-px-2 rtds-py-0.5 rtds-rounded-xl rtds-text-xs;
    }

    .rtds-chip--lg {
        @apply rtds-px-4 rtds-py-2 rtds-rounded-3xl rtds-text-sm;
    }

    /* Chip category */
    .rtds-chip--category {
        @apply rtds-content-info rtds-border-current rtds-bg-white;
    }

    /* Chip link - interactive */
    .rtds-chip--interactive {
        @apply rtds-bg-transparent hover:rtds-background-02 focus:rtds-bg-white focus:rtds-border-gray-01 active:rtds-background-06 active:rtds-text-white active:rtds-border-gray-01;
    }

    .rtds-chip.is-selected {
        @apply rtds-background-06 rtds-text-white;
    }

    .rtds-chip__close {
        @apply rtds-inline-flex rtds-items-center rtds-justify-center rtds-rounded-full hover:rtds-background-02 hover:rtds-content-01 focus:rtds-background-02 focus:rtds-content-01 active:rtds-background-02 active:rtds-content-01 rtds-transition-all;
    }

    .rtds-chip__close {
        @apply after:rtds-content-[''] after:rtds-block after:rtds-right-0 after:rtds-w-8 after:rtds-h-8 after:rtds-absolute;
    }

    .rtds-chip.has-button-close {
        @apply rtds-pr-2 rtds-relative;
    }

    .rtds-chip.has-button-close.rtds-chip--sm {
        @apply rtds-pr-2;
    }

    .rtds-chip.has-button-close.rtds-chip--lg {
        @apply rtds-pr-2;
    }

    /* CHIP STATUS */
    .rtds-chip--status.is-open {
        @apply rtds-bg-bando-aperto rtds-border-bando-aperto rtds-text-black;
    }

    .rtds-chip--status.is-in-progress {
        @apply rtds-bg-bando-in-attivazione rtds-border-bando-in-attivazione rtds-text-black;
    }

    .rtds-chip--status.is-closed {
        @apply rtds-bg-archiviato rtds-border-archiviato rtds-text-white;
    }

    /* Other status */
    .rtds-chip--status.is-pending {
        @apply rtds-bg-error-dark rtds-border-error-dark rtds-text-white;
    }
    
    

    /* CHIP FILTER */
    .rtds-chip--filter {
        @apply rtds-gap-2 rtds-background-06 rtds-text-white;
    }
    
}
  • URL: /components/raw/chip/chip.css
  • Filesystem Path: components/02-atoms/chip/chip.css
  • Size: 2.2 KB

Chip

Componente per etichette interattive con supporto per diverse varianti, dimensioni e stati.

Comportamento

Il componente può essere renderizzato come:

  • <span> — elemento di default (senza href); usato per chip informativi, di categoria o di stato non interattivi
  • <a> — quando viene specificato href nel contesto Fractal/Nunjucks; chip cliccabile per navigazione o filtraggio

Varianti

Varianti di Stile

  • category: Per etichette di categoria
  • tag: Per etichette di tag
  • tag-sm: Per etichette di tag piccole
  • filter: Per filtri
  • interactive: Per chip cliccabili

Varianti di Dimensione

  • default: Dimensione standard
  • sm: Dimensione piccola
  • lg: Dimensione grande

Varianti di Stato

  • status-aperto: Stato “Aperto”
  • status-in-corso: Stato “In corso”
  • status-chiuso: Stato “Chiuso”

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

Parametri Base

  • label (stringa, obbligatorio): Testo del chip
  • href (stringa, opzionale): URL per renderizzare come link
  • classes (stringa, opzionale): Classi CSS aggiuntive
  • hasBtnClose (booleano, opzionale): Aggiunge un pulsante di chiusura

Parametri per Icone

  • icon (stringa, opzionale): ID dell’icona da utilizzare

Parametri di Accessibilità

  • srLabel (stringa, opzionale): Etichetta per screen reader

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.4.3 Contrasto minimo — testo su sfondo per tutte le varianti di colore e stato
  • 2.1.1 Tastiera — il pulsante di chiusura e il chip interattivo sono raggiungibili e attivabili da tastiera
  • 2.4.4 Scopo del collegamento (nel contesto) — il testo del chip comunica chiaramente la destinazione o il filtro
  • 4.1.2 Nome, Ruolo, Valore — il pulsante di chiusura ha un nome accessibile tramite <span class="rtds-sr-only">

Struttura e semantica

  • <span> — nessun ruolo interattivo; non focusabile; usare per chip informativi, di categoria o di stato che non richiedono interazione
  • <a> — ruolo implicito link; raggiungibile con Tab, attivabile con Enter; usare per chip che navigano verso una destinazione o applicano un filtro
  • <button type="button"> (pulsante di chiusura) — ruolo implicito button; attivabile con Enter e Space; il nome accessibile è fornito dal <span class="rtds-sr-only"> interno

Attributi ARIA

Attributo Valori Condizione
aria-hidden "true" sull’icona decorativa (tramite componente @icon)
Tasto Azione
Tab / Shift+Tab Sposta il focus sul/dal chip (variante <a>) o sul pulsante di chiusura
Enter Attiva il link / attiva il pulsante di chiusura
Space Attiva il pulsante di chiusura

Gestione del focus

  • Focus visibile: lo stile :focus-visible è sempre visibile e non viene rimosso via CSS

Screen reader

  • Il <span class="rtds-sr-only"> opzionale prima del testo visibile aggiunge contesto prefissato (es. “Categoria: “, “Stato: “) — lo screen reader lo legge come parte del nome accessibile del chip
  • Il pulsante di chiusura ha un <span class="rtds-sr-only"> con testo “Rimuovi [nome chip]” — lo screen reader annuncia l’azione e l’oggetto che verrà rimosso
  • Le icone decorative hanno aria-hidden="true" — lo screen reader le ignora

Stili CSS

Classi Base

  • .rtds-chip: Stile base del chip
    • Layout: inline-flex, items-center
    • Padding: px-3 py-1
    • Font: bold, text-sm
    • Bordi: border, rounded-2xl, border-gray-04
    • Colore: content-01

Classi Modificatori

  • .rtds-chip--sm: padding ridotto, text-xs, rounded-xl
  • .rtds-chip--lg: padding aumentato, text-sm, rounded-3xl
  • .rtds-chip--category: colore content-info, bordo border-current, sfondo bg-white
  • .rtds-chip--interactive: hover background-02, focus bg-white border-gray-01
  • .rtds-chip--filter: gap-2, sfondo background-06, colore text-white

Classi di Stato

  • .rtds-chip--status.is-open: sfondo bg-bando-aperto, bordo border-bando-aperto, colore text-black
  • .rtds-chip--status.is-in-progress: sfondo bg-bando-in-attivazione, bordo border-bando-in-attivazione
  • .rtds-chip--status.is-closed: sfondo bg-archiviato, bordo border-archiviato, colore text-white

Classi Elementi (BEM)

  • .rtds-chip__close: pulsante di chiusura — inline-flex, dimensione w-5 h-5, rounded-full

Esempi di utilizzo

<!-- Chip standard -->
<span class="rtds-chip">Etichetta</span>

<!-- Chip con pulsante di chiusura -->
<span class="rtds-chip has-button-close">
  Etichetta
  <button class="rtds-chip__close">
    <svg class="rtds-icon">...</svg>
    <span class="rtds-sr-only">Rimuovi Etichetta</span>
  </button>
</span>

<!-- Chip interattivo -->
<a href="#" class="rtds-chip rtds-chip--interactive">Chip Cliccabile</a>

<!-- Chip di stato -->
<span class="rtds-chip rtds-chip--status is-open">
  <span class="rtds-sr-only">Stato: </span>
  Aperto
</span>

<!-- Chip di categoria -->
<span class="rtds-chip rtds-chip--category">
  <svg class="rtds-icon rtds-mr-1">...</svg>
  <span class="rtds-sr-only">Categoria: </span>
  Categoria
</span>