1. Komponenty

Tlačítka Complete

Tlačítka uživatelé používají pro spuštění akce. Pokud chceme do stránky vložit pouhý odkaz na statickou stránku v rámci webu nebo externí odkaz, je ve většině případů lepší použít odkaz.

Typy tlačítek odstupňované podle důležitosti spouštěné akce.


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Secondary</button>

Nejdůležitější tlačítko primární akce v různých velikostech.


<div class="row mb-2">
    <div class="col-12 col-md-3 mb-1">
        <button type="button" class="btn btn-primary btn-sm">Small</button>
    </div>
    <div class="col-12 col-md-3 mb-1">
        <button type="button" class="btn btn-primary">Normal</button>
    </div>
    <div class="col-12 col-md-4 col-lg-3 mb-1">
        <button type="button" class="btn btn-primary btn-lg">Large</button>
    </div>
    <div class="ol-12 col-md-3 mb-1">
        <button type="button" class="btn btn-primary btn-sm btn-disabled" disabled="disabled">Small</button>
    </div>
    <div class="ol-12 col-md-3 mb-1">
        <button type="button" class="btn btn-primary btn-disabled" disabled="disabled">Normal</button>
    </div>
    <div class="col-12 col-md-4 col-lg-3 mb-1">
        <button type="button" class="btn btn-primary btn-lg btn-disabled" disabled="disabled">Large</button>
    </div>
</div>

Tlačítko sekundární akce v různých velikostech.


<div class="row mb-2">
    <div class="ol-12 col-md-3 mb-1">
        <button type="button" class="btn btn-outline-primary btn-sm">Small</button>
    </div>
    <div class="ol-12 col-md-3 mb-1">
        <button type="button" class="btn btn-outline-primary">Normal</button>
    </div>
    <div class="col-12 col-md-4 col-lg-3 mb-1">
        <button type="button" class="btn btn-outline-primary btn-lg">Large</button>
    </div>
    <div class="ol-12 col-md-3 mb-1">
        <button type="button" class="btn btn-outline-primary btn-sm btn-disabled" disabled="disabled">Small</button>
    </div>
    <div class="ol-12 col-md-3 mb-1">
        <button type="button" class="btn btn-outline-primary btn-disabled" disabled="disabled">Normal</button>
    </div>
    <div class="col-12 col-md-4 col-lg-3 mb-1">
        <button type="button" class="btn btn-outline-primary btn-lg btn-disabled" disabled="disabled">Large</button>
    </div>
</div>

Typy tlačítek

Existuje několik druhů tlačítek, které se používají v odlišném kontextu.

Typ Použití
Primární Používáme pro spuštění primární akce jako např. vyhledávání, napsání datové zprávy, nahrání nového dokumentu atd. Primární tlačítko by mělo být použito na stránce pouze jednou.
Sekundární Používáme pro sekundární akce jako např. tisk datové zprávy, zobrazení dalšího obsahu apod.

Velikosti tlačítek

Tlačítka můžeme používat v několika různých velikostech. Pro každou situaci je vhodné jiné použití.

Velikost Použití
Small Používáme především tam, kde není dostatek prostoru pro umístění tlačítka normální velikosti.
Normal Standardní velikost, se kterou si vystačíte ve většině případů.
Large Vhodné především pro landing-pages s cílem provedení konverze (např. registrace do portálu, spočítání důchodu, apod.)

Neaktivní stav

Užíváme tam, kde uživatel nemá povolenou danou akci nebo v případě, že se nacházíme přímo na stránce dané akce.

Příklad použítí:

Ukázka použití

V datové schránce na Portálu občana je použitý DISABLE BUTTON při psaní zprávy v situaci, kdy akce, kterou tlačítko vyvolává, je právě spuštěná a není ji tedy možné spustit znovu.