Regione Toscana Design System

Chip: Category 

<span class="rtds-chip rtds-chip--category">
    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--computer-desktop" />
    </svg>

    <span class="rtds-sr-only">Categoria: </span>

    categoria</span>
 
{% extends '@chip' %}
{% block classes %} rtds-chip--category{% if classes %} {{ classes }}{%- endif -%}{% endblock %}
{%- block icon -%}
    {% if icon and icon != 'none' %}
        {% render '@icon--small', { id: icon, size: 'rtds-w-4 rtds-h-4', classes: 'rtds-mr-1.5' }, true %}
    {% endif %}
{%- endblock -%}
{%- block close -%}{%- endblock -%}
 
{
  "label": "categoria",
  "srLabel": "Categoria: ",
  "icon": "mini--computer-desktop"
}
  • 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> (default)
  • <a> (quando viene specificato href)

Varianti

Varianti di Dimensione

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

Varianti di Tipo

  • 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 Stato

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

Parametri di Configurazione

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

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 per Dimensioni

  • .rtds-chip--sm:
    • Padding: px-2 py-0.5
    • Font: text-xs
    • Bordi: rounded-xl
  • .rtds-chip--lg:
    • Padding: px-4 py-2
    • Font: text-sm
    • Bordi: rounded-3xl

Classi per Tipo

  • .rtds-chip--category:
    • Colore: content-info
    • Bordo: border-current
    • Sfondo: bg-white
  • .rtds-chip--interactive:
    • Hover: background-02
    • Focus: bg-white, border-gray-01
    • Active: background-06, text-white, border-gray-01
  • .rtds-chip--filter:
    • Gap: gap-2
    • Sfondo: background-06
    • Colore: text-white

Classi per 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
    • Colore: text-black
  • .rtds-chip--status.is-closed:
    • Sfondo: bg-archiviato
    • Bordo: border-archiviato
    • Colore: text-white

Classi per Pulsante di Chiusura

  • .rtds-chip__close:
    • Layout: inline-flex, items-center, justify-center
    • Dimensione: w-5 h-5
    • Bordi: rounded-full
    • Stati: hover/focus/active con background-02 e content-01
    • Transizione: transition-all

Esempio 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>