Regione Toscana Design System

Link component: Default 

<a href="" class="rtds-action-link ">
    Link text

</a>
 
<{% if span %}span{% else %}a href="{{ href }}"{% endif %}{% if allyHidden %} tabindex="-1" aria-hidden="true"{% endif %} class="rtds-action-link{%- block classes %} {{ classes }}{%- endblock -%}">
    {%- block content -%}
        {% if iconOnly %}
            <span class="rtds-sr-only">{{ label }}</span>
        {% else %}
            {{ label | safe }}
        {% endif %}
         {% if accessibleLabel %}<span class="rtds-sr-only">{{ accessibleLabel }}</span>{% endif %}
    {%- endblock -%}
    {%- block icon -%}
        {% if hasIcon %}
            {% render '@icon--small', { id: icon, size: iconSize, classes: iconClasses }, true %}
        {% endif %}
        {% if iconOnly %}
            {% render '@icon--medium', { id: icon, size: iconSize, classes: iconClasses }, true %}
        {% endif %}
    {%- endblock -%}
</{% if span %}span{% else %}a{% endif %}>
 
{
  "label": "Link text",
  "icon": "mini--arrow-small-right",
  "iconSize": ""
}
  • Content: 
    /* LINK */
@layer components {
    .rtds-action-link {
        @apply rtds-inline-flex rtds-gap-2 rtds-items-center rtds-link-primary rtds-transition-all hover:rtds-underline hover:rtds-link-primary-hover focus:rtds-text-primary-800 rtds-text-base md:rtds-text-base rtds-font-bold;
    }

    .rtds-action-link--sm {
        @apply rtds-text-sm rtds-gap-1.5;
    }

    .rtds-action-link--lg {
        @apply rtds-text-lg rtds-gap-2.5;
    }

    .rtds-action-link--underline {
        @apply rtds-underline;
    }

    /* ICON ONLY */
    .rtds-action-link--icon-only {
        @apply rtds-p-1 hover:rtds-bg-secondary-50 hover:rtds-content-primary-dark rtds-rounded-sm;
    }

    /* SIZE */
    :where(.rtds-action-link) .rtds-icon {
        @apply rtds-w-5 rtds-h-5;
    }

    :where(.rtds-action-link--sm) .rtds-icon {
        @apply rtds-w-4 rtds-h-4;
    }

    :where(.rtds-action-link--lg) .rtds-icon {
        @apply rtds-w-6 rtds-h-6;
    }
}
  • URL: /components/raw/action-link/action-link.css
  • Filesystem Path: components/02-atoms/action-link/action-link.css
  • Size: 954 Bytes

Action Link

Componente per link di azione con supporto per icone e diverse dimensioni.

Comportamento

Il componente si presenta come un link stilizzato che può:

  • Essere visualizzato come link (<a>) o span (<span>)
  • Includere un’icona opzionale
  • Essere visualizzato solo con l’icona (versione icon-only)
  • Supportare diverse dimensioni (sm, default, lg)
  • Essere accessibile con etichette per screen reader

Varianti

  • default: Link standard
  • has-icon: Link con icona
  • icon-only: Solo icona cliccabile
  • sm: Dimensione piccola
  • lg: Dimensione grande

Parametri di Configurazione

Parametri Base

  • label (stringa, obbligatorio): Testo del link
  • href (stringa, opzionale): URL del link. Se non specificato, il componente renderizza uno <span>
  • classes (stringa, opzionale): Classi CSS aggiuntive

Parametri per Icone

  • hasIcon (booleano, opzionale): Abilita la visualizzazione dell’icona
  • iconOnly (booleano, opzionale): Mostra solo l’icona come link
  • icon (stringa, opzionale): ID dell’icona da utilizzare
  • iconSize (stringa, opzionale): Dimensione personalizzata per l’icona
  • iconClasses (stringa, opzionale): Classi CSS aggiuntive per l’icona

Parametri di Accessibilità

  • allyHidden (booleano, opzionale): Nasconde il link agli screen reader
  • accessibleLabel (stringa, opzionale): Etichetta aggiuntiva per screen reader

Stili CSS

Il componente utilizza le seguenti classi CSS:

  • .rtds-action-link: Stile base del link
  • .rtds-action-link--sm: Dimensione piccola
  • .rtds-action-link--lg: Dimensione grande
  • .rtds-action-link--underline: Versione sottolineata
  • .rtds-action-link--icon-only: Stile per versione solo icona

Dimensioni Icone

  • Default: 20x20px (w-5 h-5)
  • Small: 16x16px (w-4 h-4)
  • Large: 24x24px (w-6 h-6)

Esempio di Utilizzo

<!-- Link standard -->
<a href="#" class="rtds-action-link">Link text</a>

<!-- Link con icona -->
<a href="#" class="rtds-action-link">
  Link text
  <svg class="rtds-icon">...</svg>
</a>

<!-- Solo icona -->
<a href="#" class="rtds-action-link rtds-action-link--icon-only">
  <span class="rtds-sr-only">Link text</span>
  <svg class="rtds-icon">...</svg>
</a>