Regione Toscana Design System

Button: Icon Square L 

<button type="button" class="rtds-btn 
    r rtds-btn--icon rtds-btn--icon-square rtds-btn--outlined rtds-btn--l"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
        <use href="../../icons.svg#mini--chevron-right" />
    </svg>
    <span class="rtds-sr-only">

        Button label
    </span>

</button>
 
{% extends '@button--icon-square' %}

{%- block classes -%}
    r {{ super() }} rtds-btn--l
{%- endblock classes -%}
 
{
  "label": "Button label",
  "iconSize": "rtds-w-6 rtds-h-6",
  "iconTransformType": "translate",
  "labelHidden": true,
  "classes": "rtds-btn--outlined",
  "icon": "mini--chevron-right"
}
  • Content: 
    /**
 * BUTTON
 *
*/
@layer components {
    .rtds-btn {
        @apply rtds-py-3 rtds-px-4 rtds-rounded-md rtds-border rtds-inline-flex rtds-gap-1 rtds-items-center rtds-justify-center rtds-font-bold rtds-text-lg rtds-tracking-wide rtds-transition-all rtds-duration-200 rtds-ease-out rtds-leading-none;
    }

    .rtds-btn--primary {
        @apply rtds-button-primary rtds-text-white hover:rtds-text-white hover:rtds-button-primary-hover focus:rtds-button-primary-hover active:rtds-button-primary-active;
    }

    .rtds-btn--secondary {
        @apply rtds-button-secondary rtds-text-white hover:rtds-button-secondary-hover focus:rtds-button-secondary-hover active:rtds-button-secondary-active;
    }

    .rtds-btn--only-text {
        @apply rtds-bg-transparent rtds-button-only-text hover:rtds-button-only-text-hover hover:rtds-background-02 focus:rtds-button-only-text-hover focus:rtds-background-01 active:rtds-button-only-text-active;
    }

    .rtds-btn--outlined {
        @apply rtds-bg-transparent rtds-button-outline rtds-border rtds-border-current hover:rtds-button-primary hover:rtds-text-white focus:rtds-button-outline-hover focus:rtds-background-01;
    }
    
    .rtds-btn--inverted {
        @apply rtds-button-inverted rtds-button-inverted-text hover:rtds-button-inverted-hover hover:rtds-button-inverted-text-hover focus:rtds-button-inverted-focus focus:rtds-button-inverted-text-focus active:rtds-button-inverted-active active:rtds-button-inverted-text-active;
    }

    .rtds-btn--text-inverted {
        @apply rtds-button-text-inverted rtds-button-text-inverted-text hover:rtds-button-text-inverted-hover hover:rtds-button-text-inverted-text-hover focus:rtds-button-text-inverted-focus focus:rtds-button-text-inverted-text-focus active:rtds-button-text-inverted-active active:rtds-button-text-inverted-text-active;
    }

    /* UTILITY VARIANTS FOR SIZE MANAGING AND ICON MANAGING */

    .rtds-btn--icon {
        @apply rtds-rounded-full rtds-justify-center rtds-p-0 rtds-w-9 rtds-h-9;
    }

    .rtds-btn--icon-square {
        @apply rtds-rounded-md rtds-justify-center rtds-p-0 rtds-w-9 rtds-h-9;
    }

    /*.rtds-btn--icon-right,
    .rtds-btn--icon-left {
        @apply rtds-justify-between;
    }*/

    .rtds-btn--icon-right {
        @apply rtds-pr-3;
    }

    .rtds-btn--icon-left {
        @apply rtds-pl-3;
    }

    .rtds-btn--icon-right .rtds-icon,
    .rtds-btn--icon-left .rtds-icon {
        @apply rtds-transition-all rtds-duration-200 rtds-ease-out rtds-transform rtds-flex-none;
    }

    /* SIZE MANAGEMENT */
    .rtds-btn--s {
        @apply rtds-gap-0.5 rtds-text-sm;
    }

    .rtds-btn--l {
        @apply rtds-gap-2 rtds-px-6 rtds-py-3 rtds-text-xl;
    }

    /* SPACING MANAGEMENT FOR BUTTON WITH ICON */
    .rtds-btn--s:where(.rtds-btn--icon),
    .rtds-btn--s:where(.rtds-btn--icon-square) {
        @apply rtds-w-6 rtds-h-6;
    }
    .rtds-btn--s:where(.rtds-btn--icon-right),
    .rtds-btn--s:where(.rtds-btn--icon-left) {
        @apply rtds-gap-1.5;
    }

    .rtds-btn--s:where(.rtds-btn--icon-right) {
        @apply rtds-pr-3;
    }

    .rtds-btn--s:where(.rtds-btn--icon-left) {
        @apply rtds-pl-3;
    }

    .rtds-btn--l:where(.rtds-btn--icon),
    .rtds-btn--l:where(.rtds-btn--icon-square) {
        @apply rtds-w-12 rtds-h-12;
    }
    
    .rtds-btn--l:where(.rtds-btn--icon-right) {
        @apply rtds-pr-4;
    }

    .rtds-btn--l:where(.rtds-btn--icon-left) {
        @apply rtds-pl-4;
    }

    .rtds-btn--s:where(.rtds-btn--icon),
    .rtds-btn--l:where(.rtds-btn--icon),
    .rtds-btn--s:where(.rtds-btn--icon-square),
    .rtds-btn--l:where(.rtds-btn--icon-square) {
        @apply rtds-px-0;
    }

}
  • URL: /components/raw/button/button.css
  • Filesystem Path: components/02-atoms/button/button.css
  • Size: 3.7 KB

Button

Componente per pulsanti con supporto per diverse varianti, dimensioni e icone.

Comportamento

Il componente può essere renderizzato come:

  • <button> (default)
  • <a> (quando viene specificato href)
  • <span> (quando viene specificato span: true)

Varianti

Varianti di Stile

  • primary: Pulsante primario (default)
  • secondary: Pulsante secondario
  • outlined: Pulsante con bordo
  • inverted: Pulsante con stile invertito
  • text-inverted: Pulsante di testo con stile invertito
  • only-text: Pulsante di solo testo

Varianti con Icone

  • icon: Pulsante circolare con solo icona
  • icon-s: Pulsante circolare piccolo con solo icona
  • icon-l: Pulsante circolare grande con solo icona
  • icon-right: Pulsante con icona a destra
  • icon-right-s: Pulsante piccolo con icona a destra
  • icon-right-l: Pulsante grande con icona a destra
  • icon-left: Pulsante con icona a sinistra
  • icon-left-s: Pulsante piccolo con icona a sinistra
  • icon-left-l: Pulsante grande con icona a sinistra

Varianti con Effetti di Animazione

Queste varianti sono solo di esempio per il codice da utilizzare per la gestione dell’effetto sull’icona:

  • icon-right-scale: Pulsante con icona a destra e effetto scale al hover
  • icon-left-scale: Pulsante con icona a sinistra e effetto scale al hover

Effetti di Animazione per le Icone

I pulsanti con icone (a destra o a sinistra) supportano due tipi di effetti di animazione che si attivano al passaggio del mouse (hover):

Effetto Scale

  • Parametro: iconTransformType: "scale"
  • Comportamento: L’icona si ingrandisce del 125% al hover
  • Classe CSS applicata: group-hover/button:rtds-scale-125
  • Utilizzo: Ideale per dare un feedback visivo di interazione

Effetto Translate

  • Parametro: iconTransformType: "translate"
  • Comportamento: L’icona si sposta orizzontalmente al hover
    • Icona a destra: si sposta verso destra (rtds-translate-x-1)
    • Icona a sinistra: si sposta verso sinistra (-rtds-translate-x-1)
  • Classe CSS applicata:
    • Icona destra: group-hover/button:rtds-translate-x-1
    • Icona sinistra: group-hover/button:-rtds-translate-x-1
  • Utilizzo: Ideale per suggerire direzione o movimento

Implementazione

Gli effetti sono implementati utilizzando il sistema di gruppi Tailwind CSS (rtds-group/button) e si attivano automaticamente quando il parametro iconTransformType è specificato nel contesto del componente.

Varianti di Dimensione

  • size-s: Dimensione piccola
  • size-l: Dimensione grande

Varianti Speciali

  • spinner: Pulsante con indicatore di caricamento

Parametri di Configurazione

Parametri Base

  • label (stringa, obbligatorio): Testo del pulsante
  • classes (stringa, opzionale): Classi CSS aggiuntive
  • buttonType (stringa, opzionale): Tipo del pulsante (button, submit, reset). Default: “button”
  • href (stringa, opzionale): URL per renderizzare come link
  • span (booleano, opzionale): Renderizza come span invece che button/link

Parametri per Icone

  • icon (stringa, opzionale): ID dell’icona da utilizzare
  • iconSize (stringa, opzionale): Classi CSS per la dimensione dell’icona
  • iconTransformType (stringa, opzionale): Tipo di animazione dell’icona al passaggio del mouse. Valori supportati:
    • 'scale': Effetto di ingrandimento (125%)
    • 'translate': Effetto di traslazione orizzontale

Parametri di Accessibilità

  • labelHidden (booleano, opzionale): Nasconde il testo visibile ma mantiene l’accessibilità
  • srOnlyLabel (stringa, opzionale): Testo aggiuntivo visibile solo agli screen reader
  • ariaExpanded (booleano, opzionale): Stato di espansione per ARIA
  • ariaControls (stringa, opzionale): ID dell’elemento controllato per ARIA
  • ariaLabel (stringa, opzionale): Etichetta ARIA per il pulsante
  • id (stringa, opzionale): ID del pulsante
  • callback (stringa, opzionale): Funzione JavaScript da eseguire al click

Accessibilità

Il componente button è progettato per garantire la massima accessibilità seguendo le linee guida WCAG 2.1. Ecco come gestire correttamente l’accessibilità per i diversi tipi di pulsanti:

Pulsanti Solo Icona

Per i pulsanti che contengono solo un’icona (varianti icon, icon-s, icon-l, icon-square, etc.), è obbligatorio fornire un’etichetta accessibile agli screen reader. Il componente gestisce automaticamente questo aspetto quando si utilizza il parametro labelHidden: true:

Implementazione nel template:

  • Il testo del label viene automaticamente avvolto nella classe rtds-sr-only
  • L’icona rimane visibile mentre il testo è nascosto visivamente
  • Gli screen reader possono comunque leggere l’etichetta

Esempio di output HTML:

<button class="rtds-btn rtds-btn--primary rtds-btn--icon">
  <span class="rtds-sr-only">Chiudi</span>
  <svg class="rtds-icon">...</svg>
</button>

Etichette Aggiuntive per Screen Reader

Per fornire informazioni di contesto aggiuntive agli screen reader, utilizzare il parametro srOnlyLabel:

Esempio di output HTML:

<button class="rtds-btn rtds-btn--primary">
  <span>Salva</span>
  <span class="rtds-sr-only">documento corrente</span>
</button>

Attributi ARIA

Il componente supporta i principali attributi ARIA per una navigazione accessibile:

  • ariaLabel: Fornisce un’etichetta alternativa per il pulsante
  • ariaExpanded: Indica lo stato espanso/collassato (per menu, dropdown, etc.)
  • ariaControls: Specifica quale elemento è controllato dal pulsante

Esempio di output HTML:

<button class="rtds-btn rtds-btn--primary" 
        aria-label="Apri menu principale" 
        aria-expanded="false" 
        aria-controls="main-menu">
  Menu
</button>

Linee Guida per l’Uso

Per Sviluppatori (Template/Configurazioni)

  • Utilizzare sempre labelHidden: true per pulsanti solo icona
  • Fornire sempre un label significativo anche se nascosto
  • Utilizzare srOnlyLabel per informazioni di contesto aggiuntive
  • Impostare ariaExpanded per elementi che controllano la visibilità di altri contenuti

Per Implementazione HTML Diretta

  • Utilizzare sempre la classe rtds-sr-only per nascondere testo destinato solo agli screen reader
  • Assicurarsi che ogni pulsante solo icona abbia un’etichetta accessibile
  • Implementare correttamente gli attributi ARIA quando necessario

Classe CSS per Screen Reader

La classe rtds-sr-only nasconde visivamente il contenuto ma lo mantiene accessibile agli screen reader:

.rtds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Stili CSS

Classi Base

  • .rtds-btn: Stile base del pulsante
  • .rtds-btn--primary: Stile primario
  • .rtds-btn--secondary: Stile secondario
  • .rtds-btn--outlined: Stile con bordo
  • .rtds-btn--inverted: Stile invertito
  • .rtds-btn--text-inverted: Stile di testo invertito
  • .rtds-btn--only-text: Stile di solo testo

Classi per Icone

  • .rtds-btn--icon: Stile per pulsante circolare con icona
  • .rtds-btn--icon-right: Stile per icona a destra
  • .rtds-btn--icon-left: Stile per icona a sinistra

Classi per Dimensioni

  • .rtds-btn--s: Dimensione piccola
  • .rtds-btn--l: Dimensione grande

Dimensioni e Spaziatura

Dimensioni Standard

  • Default: py-3 px-4, text-lg
  • Small (s): py-3 px-4, text-sm
  • Large (l): py-3 px-6, text-xl

Dimensioni Icone

  • Default: w-4 h-4 (md: w-5 h-5, lg: w-6 h-6)
  • Small: w-4 h-4
  • Large: w-6 h-6

Spaziatura con Icone

  • Default: gap-1
  • Small: gap-0.5
  • Large: gap-2

Esempi di Utilizzo

Pulsanti Standard

<!-- Pulsante primario -->
<button class="rtds-btn rtds-btn--primary">
  Salva
</button>

<!-- Pulsante secondario -->
<button class="rtds-btn rtds-btn--secondary">
  Annulla
</button>

Pulsanti con Icone

<!-- Pulsante con icona a destra -->
<button class="rtds-btn rtds-btn--primary rtds-btn--icon-right">
  Continua
  <svg class="rtds-icon">...</svg>
</button>

<!-- Pulsante con icona a sinistra -->
<button class="rtds-btn rtds-btn--primary rtds-btn--icon-left">
  <svg class="rtds-icon">...</svg>
  Indietro
</button>

Pulsanti Solo Icona (Accessibili)

<!-- Pulsante circolare con icona -->
<button class="rtds-btn rtds-btn--primary rtds-btn--icon">
  <span class="rtds-sr-only">Chiudi</span>
  <svg class="rtds-icon">...</svg>
</button>

<!-- Pulsante quadrato con icona -->
<button class="rtds-btn rtds-btn--outlined rtds-btn--icon-square">
  <span class="rtds-sr-only">Modifica</span>
  <svg class="rtds-icon">...</svg>
</button>

Pulsanti con Attributi ARIA

<!-- Pulsante per menu dropdown -->
<button class="rtds-btn rtds-btn--primary" 
        aria-expanded="false" 
        aria-controls="dropdown-menu">
  Menu
  <svg class="rtds-icon">...</svg>
</button>

<!-- Pulsante con etichetta ARIA personalizzata -->
<button class="rtds-btn rtds-btn--primary" 
        aria-label="Salva documento corrente">
  Salva
</button>

Pulsanti con Informazioni Aggiuntive per Screen Reader

<!-- Pulsante con contesto aggiuntivo -->
<button class="rtds-btn rtds-btn--primary">
  <span>Elimina</span>
  <span class="rtds-sr-only">questo elemento dalla lista</span>
</button>