Bottoni

Pulsanti di interfaccia per la tua applicazione.

Utilizzo Con icona Varianti di colore Su sfondo scuro Varianti di dimensione Documentazione su Bootstrap Italia

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="#" title="Lorem Ipsum" 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">
<button class="btn" type="reset">
    <div class="d-flex w-100 h-100 align-items-center">
        <svg role="img" aria-labelledby="button_tit2" class="icon icon-sm mr-1">
            <title id="button_tit2">Elimina Filtri</title>
            <use href="./dist/svg/sprite.svg#it-close"></use>
        </svg>
        Reset
    </div>
</button>

Con icona

ultimo aggiornamento 07/10/24

Varianti dei bottoni, con al loro interno una icona

Link

<a class="btn btn-primary" href="#" role="button">
    <div class="d-flex w-100 h-100 align-items-center">Link
        <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
            <title id="button_tit1">Titolo</title>
            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
        </svg>
    </div>
</a>
<button class="btn btn-primary" type="submit">
    <div class="d-flex w-100 h-100 align-items-center">Button
        <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
            <title id="button_tit2">Titolo</title>
            <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
        </svg>
    </div>
</button>
<button class="btn btn-primary" 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>

Varianti di colore

ultimo aggiornamento 08/10/24

Primary

Primary outline

Primary flat

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" title="Lorem Ipsum" href="#" role="button">Primary</a>
    <a class="btn btn-primary" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Primary
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-primary" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Primary
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
    <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>
   
</div>
<div class="btn-example mt-2">
    <button type="button" class="btn btn-outline-primary">Primary outline</button>
    <a class="btn btn-outline-primary" title="Lorem Ipsum" href="#" role="button">Primary outline</a>
    <a class="btn btn-outline-primary" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Primary outline
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-outline-primary" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Primary outline
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
    <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-flat-primary">Primary flat</button>
    <a class="btn btn-flat-primary" title="Lorem Ipsum" href="#" role="button">Primary flat</a>
    <a class="btn btn-flat-primary" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Primary flat
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-flat-primary" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Primary flat
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
    <button class="btn btn-flat-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" title="Lorem Ipsum" href="#" role="button">Primary disabled</a>
        <a class="btn btn-primary disabled" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Primary disabled
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-primary disabled" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Primary disabled
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
    <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" title="Lorem Ipsum" href="#" role="button">Secondary</a>
 <a class="btn btn-secondary" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Secondary
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-secondary" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Secondary
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
    <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>
    <div class="btn-example mt-2">
<button type="button" class="btn btn-outline-secondary">Secondary outline</button>
<a class="btn btn-outline-secondary" title="Lorem Ipsum" href="#" role="button">Secondary outline</a>
<a class="btn btn-outline-secondary" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Secondary outline
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-outline-secondary" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Secondary outline
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
<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" title="Lorem Ipsum" href="#" role="button">Secondary disabled</a>
<a class="btn btn-secondary disabled" title="Lorem Ipsum" href="#" role="button">
        <div class="d-flex w-100 h-100 align-items-center">Secondary disabled
            <svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
                <title id="button_tit1">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </a>
    <button class="btn btn-secondary disabled" type="submit">
        <div class="d-flex w-100 h-100 align-items-center">Secondary disabled
            <svg role="img" aria-labelledby="button_tit2" class="icon icon-xs ml-2">
                <title id="button_tit2">Titolo</title>
                <use href="./dist/svg/sprite.svg#it-arrow-right"></use>
            </svg>
        </div>
    </button>
<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" title="Lorem Ipsum" 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" title="Lorem Ipsum" 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" title="Lorem Ipsum" 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" title="Lorem Ipsum" 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" title="Lorem Ipsum" 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" title="Lorem Ipsum" 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>

Tema Unito v 3 / 3.1

DOCUMENTAZIONE