Unito.it

Tema Unito v3

Bottoni

Pulsanti di interfaccia per la tua applicazione.

Utilizzo

Per aggiungere un bottone personalizzato, è sufficiente utilizzare la classe .btn, associandola a classi di tipo .btn- per applicarne le varianti di stile, dimensione, ecc.

Le classi .btn sono state pensate per essere utilizzate con l’elemento <button>. Tuttavia, è possibile applicare lo stile per i bottoni anche ad elementi di tipo <a> o <input>, anche se alcuni browser potrebbero mostrare un rendering lievemente diverso.

In questi casi, non dimenticare di utilizzare in modo appropriato gli attributi role="button" per trasmettere il loro scopo alle tecnologie assistive.

Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
<button class="btn btn-primary" type="submit">
    <svg role="img" aria-labelledby="button_tit" class="icon icon-sm ">
        <title id="button_tit">Titolo</title>
        <use href="./dist/svg/sprite.svg#it-search"></use>
    </svg>
</button>

Varianti di colore

Primary Primary outline
Primary disabled
Secondary Secondary outline
Secondary disabled 
<div class="btn-example">
    <button type="button" class="btn btn-primary">Primary</button>
    <a class="btn btn-primary" href="#" role="button">Primary</a>
    <button class="btn btn-primary" type="submit">
        <svg role="img" aria-labelledby="button_tit1" class="icon icon-sm ">
            <title id="button_tit1">Titolo</title>
            <use href="./dist/svg/sprite.svg#it-search"></use>
        </svg>
    </button>
    <button type="button" class="btn btn-outline-primary">Primary outline</button>
    <a class="btn btn-outline-primary" href="#" role="button">Primary outline</a>
    <button class="btn btn-outline-primary" type="submit">
        <svg role="img" aria-labelledby="button_tit2" class="icon icon-sm ">
            <title id="button_tit2">Titolo</title>
            <use href="./dist/svg/sprite.svg#it-search"></use>
        </svg>
    </button>
</div>
<div class="btn-example mt-2">
    <button type="button" class="btn btn-primary disabled">Primary disabled</button>
    <a class="btn btn-primary disabled" href="#" role="button">Primary disabled</a>
    <button class="btn btn-primary disabled" type="submit">
        <svg role="img" aria-labelledby="button_tit3" class="icon icon-sm ">
            <title id="button_tit3">Titolo</title>
            <use href="./dist/svg/sprite.svg#it-search"></use>
        </svg>
    </button>
</div>
<div class="btn-example mt-2">
<button type="button" class="btn btn-secondary">Secondary</button>
<a class="btn btn-secondary " href="#" role="button">Secondary</a>
<button class="btn btn-secondary" type="submit">
    <svg role="img" aria-labelledby="button_tit4" class="icon icon-sm ">
        <title id="button_tit4">Titolo</title>
        <use href="./dist/svg/sprite.svg#it-search"></use>
    </svg>
</button>
<button type="button" class="btn btn-outline-secondary">Secondary outline</button>
<a class="btn btn-outline-secondary" href="#" role="button">Secondary outline</a>
<button class="btn btn-outline-secondary" type="submit">
    <svg role="img" aria-labelledby="button_tit5" class="icon icon-sm ">
        <title id="button_tit5">Titolo</title>
        <use href="./dist/svg/sprite.svg#it-search"></use>
    </svg>
</button>
</div>
<div class="btn-example mt-2">
<button type="button" class="btn btn-secondary disabled">Secondary disabled</button>
<a class="btn btn-secondary disabled" href="#" role="button">Secondary disabled</a>
<button class="btn btn-outline-secondary disabled" type="submit">
    <svg role="img" aria-labelledby="button_tit6" class="icon icon-sm ">
        <title id="button_tit6">Titolo</title>
        <use href="./dist/svg/sprite.svg#it-search"></use>
    </svg>
</button>
</div>
Note sullo stato disabilitato
  • I tag <a> non supportano l’attributo disabled, per cui è necessario usare la classe .disabled per farli apparire visivamente disabilitati, e in modo da disabilitare pointer-events su di essi sui browser che lo supportano.
  • I bottoni disabilitati includeranno l’attributo aria-disabled="true" per indicare lo stato dell’elemento alle tecnologie assistive.
Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .visually-hidden o il suo equivalente "legacy" rispetto alla versione precedente del tema, .sr-only.

Su sfondo scuro

Primary Primary outline
Primary disabled
Secondary Secondary outline
Secondary disabled 
<div class="btn-example ml-2 mt-2">
        <button type="button" class="btn btn-primary">Primary</button>
        <a class="btn btn-primary" href="#" role="button">Primary</a>
        <button class="btn btn-primary" type="submit">
            <svg role="img" aria-labelledby="button_tit_a" class="icon icon-sm ">
                <title id="button_tit_a">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-search"></use>
            </svg>
        </button>
        <button type="button" class="btn btn-outline-primary">Primary outline</button>
        <a class="btn btn-outline-primary" href="#" role="button">Primary outline</a>
        <button class="btn btn-outline-primary" type="submit">
            <svg role="img" aria-labelledby="button_tit_b" class="icon icon-sm ">
                <title id="button_tit_b">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-search"></use>
            </svg>
        </button>
</div>
<div class="btn-example mt-2 ml-2 mb-2">     
        <button type="button" class="btn btn-primary disabled">Primary disabled</button>
        <a class="btn btn-primary disabled" href="#" role="button">Primary disabled</a>
        <button class="btn btn-primary disabled" type="submit">
            <svg role="img" aria-labelledby="button_tit_c" class="icon icon-sm ">
                <title id="button_tit_c">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-search"></use>
            </svg>
        </button>
</div>
<div class="btn-example mt-2 ml-2 mb-2">
        <button type="button" class="btn btn-secondary">Secondary</button>
        <a class="btn btn-secondary" href="#" role="button">Secondary</a>
        <button class="btn btn-secondary" type="submit">
            <svg role="img" aria-labelledby="button_tit_d" class="icon icon-sm ">
                <title id="button_tit_d">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-search"></use>
            </svg>
        </button>
        <button type="button" class="btn btn-outline-secondary">Secondary outline</button>
        <a class="btn btn-outline-secondary" href="#" role="button">Secondary outline</a>
        <button class="btn btn-outline-secondary" type="submit">
            <svg role="img" aria-labelledby="button_tit_e" class="icon icon-sm ">
                <title id="button_tit_e">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-search"></use>
            </svg>
        </button>
</div>
<div class="btn-example mt-2 ml-2 mb-2">
        <button type="button" class="btn btn-secondary disabled">Secondary disabled</button>
        <a class="btn btn-secondary disabled" href="#" role="button">Secondary disabled</a>
        <button class="btn btn-secondary disabled" type="submit">
            <svg role="img" aria-labelledby="button_tit_f" class="icon icon-sm ">
                <title id="button_tit_f">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-search"></use>
            </svg>
        </button>
</div>

Varianti di dimensione

Per ottenere bottoni di dimensione più grande o più piccola, è sufficiente utilizzare le classi .btn-lg, .btn-sm e .btn-xs.

Aggiungendo la classe .btn-block si ottengono invece bottoni che prendono tutta l’ampiezza a loro disposizione, a seconda delle dimensioni del loro contenitore. In questo caso, anche i bordi non sono più arrotondati.

<div class="p-2">
    <button type="button" class="btn btn-primary btn-lg btn-me">Primary Large</button>
    <button type="button" class="btn btn-secondary btn-lg">Secondary Large</button>
</div>
<div class="p-2">
    <button type="button" class="btn btn-primary btn-sm btn-me" >Primary Small</button>
    <button type="button" class="btn btn-secondary btn-sm">Secondary Small</button>
</div>
<div class="p-2">
    <button type="button" class="btn btn-primary btn-xs">Primary Mini</button>
    <button type="button" class="btn btn-secondary btn-xs">Secondary Mini</button>
</div>
<div class="p-2">
    <button type="button" class="btn btn-primary btn-lg btn-block">Primary Block</button>
</div>
<div class="p-2">
    <button type="button" class="btn btn-secondary btn-lg btn-block">Secondary Block</button>
</div>
Torna su