Authentication Button - IT-Wallet

Examples of usage of the official component for authentication via IT-Wallet.

Note: This component is based on the Bootstrap Italia library and uses the official visual identity of the IT-Wallet System.

Positioning Variants

The authentication button is available in three positioning variants for icon and label, according to the Brand Manual specifications.

1. Standard (Default)

Icon and label left-aligned. The button size depends on the label length.

<button class="btn btn-itwallet-auth btn-standard" type="button">
  <span class="btn-icon">
    <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M9.4711 2.1181C9.3255 2.0357 9.1708 1.9991 9.0207 2C8.5465 2.0037 8.1117 2.3836 8.1144 2.9127L8.141 7.7572L1.3722 3.9609C1.2258 3.8785 1.0711 3.8419 0.9209 3.8428C0.4467 3.8464 0.0156 4.2264 0.0146 4.7555L0 20.7225C0 21.4429 0.3241 22.0709 1.018 22.46L7.1029 25.8819C7.2493 25.9643 7.404 26.0009 7.5542 26C8.0284 25.9963 8.4605 25.6164 8.4605 25.0873V8.7138L11.6773 10.5044C12.3721 10.8907 12.6953 11.5215 12.6953 12.2419V21.8357L18.7124 25.2109C18.8589 25.2933 19.0136 25.3299 19.1637 25.329C19.6379 25.3253 20.07 24.9454 20.07 24.4163L20.0764 9.2338C20.0764 8.5133 19.7523 7.8854 19.0584 7.4963L9.4711 2.1181Z" fill="currentColor"/>
    </svg>
  </span>
  <span class="btn-text">Entra con IT-Wallet</span>
</button>

2. Fixed Centered

Fixed button size. Icon and label are centered.

<button class="btn btn-itwallet-auth btn-fixed-centered" type="button">
  <span class="btn-icon">...</span>
  <span class="btn-text">Entra con IT-Wallet</span>
</button>

3. Fixed Justified

Fixed button size. The icon is left-aligned, while the label is centered in the remaining space.

<button class="btn btn-itwallet-auth btn-fixed-justified" type="button">
  <span class="btn-icon">...</span>
  <span class="btn-text">Entra con IT-Wallet</span>
</button>

Size Variants

The button is available in three sizes: small (default), medium and large.

Small (Default)


Medium


Large

Disabled State

The disabled button to indicate that the action is not available.

<button class="btn btn-itwallet-auth" type="button" disabled>
  ...
</button>