1. Komponenty

Tlačítko

angl. Button

Slouží ke spuštění akce nebo k přechodu na další stránku.

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">Primary Outline</button>
<button type="button" class="btn btn-secondary">Secondary</button>

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


<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm btn-disabled" disabled="disabled">Small</button>
<button type="button" class="btn btn-primary btn-disabled" disabled="disabled">Normal</button>
<button type="button" class="btn btn-primary btn-lg btn-disabled" disabled="disabled">Large</button>

Tlačítko méně důležité akce v různých velikostech


<div class="row pt-2 pb-2">
    <div class="col-12">
        <button type="button" class="btn btn-outline-primary btn-sm">Small</button>
        <button type="button" class="btn btn-outline-primary">Normal</button>
        <button type="button" class="btn btn-outline-primary btn-lg">Large</button>
        <button type="button" class="btn btn-outline-primary btn-sm btn-disabled" disabled="disabled">Small</button>
        <button type="button" class="btn btn-outline-primary btn-disabled" disabled="disabled">Normal</button>
        <button type="button" class="btn btn-outline-primary btn-lg btn-disabled" disabled="disabled">Large</button>
    </div>
</div>

<div class="row mp-background--blue pt-2 pb-2">
    <div class="col-12">
        <button type="button" class="btn btn-outline-primary btn-inverse btn-sm">Small</button>
        <button type="button" class="btn btn-outline-primary btn-inverse">Normal</button>
        <button type="button" class="btn btn-outline-primary btn-inverse btn-lg">Large</button>
        <button type="button" class="btn btn-outline-primary btn-inverse btn-sm btn-disabled" disabled="disabled">Small</button>
        <button type="button" class="btn btn-outline-primary btn-inverse btn-disabled" disabled="disabled">Normal</button>
        <button type="button" class="btn btn-outline-primary btn-inverse btn-lg btn-disabled" disabled="disabled">Large</button>
    </div>
</div>

Tlačítko sekundární (méně významné) akce nebo tlačítko pro zobrazení dalších informací (info button)


<div class="row pt-2 pb-2">
    <div class="col-12">
        <button type="button" class="btn btn-secondary btn-sm">Small</button>
        <button type="button" class="btn btn-secondary">Normal</button>
        <button type="button" class="btn btn-secondary btn-lg">Large</button>
        <button type="button" class="btn btn-secondary btn-sm btn-disabled" disabled="disabled">Small</button>
        <button type="button" class="btn btn-secondary btn-disabled" disabled="disabled">Normal</button>
        <button type="button" class="btn btn-secondary btn-lg btn-disabled" disabled="disabled">Large</button>
    </div>
</div>
    
<div class="row mp-background--blue pt-2 pb-2">
    <div class="col-12">
        <button type="button" class="btn btn-secondary btn-inverse btn-sm">Small</button>
        <button type="button" class="btn btn-secondary btn-inverse">Normal</button>
        <button type="button" class="btn btn-secondary btn-inverse btn-lg">Large</button>
        <button type="button" class="btn btn-secondary btn-inverse btn-sm btn-disabled" disabled="disabled">Small</button>
        <button type="button" class="btn btn-secondary btn-inverse btn-disabled" disabled="disabled">Normal</button>
        <button type="button" class="btn btn-secondary btn-inverse btn-lg btn-disabled" disabled="disabled">Large</button>
    </div>
</div>

Použití

Pro spuštění akce použijte tlačítko <button>, pro odkazování na další statickou stránku použijte tlačítko jako odkaz. Pro ostatní situace použijte Odkazy.

Typy tlačítek

Existuje několik druhů tlačítek, které se líší podle kontextu jejich použití. Pro každé tlačítko existují speciální CSS třídy a to konkrétně třídy, které řeší - typ tlačítka, velikost, stav (disable state) popř. speciální třída pro speciální typ tlačítka.

Typ CSS třída Použití
Primární btn-primary 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. Vyvarujte se nadměrnému používání primárních tlačítek.
Outline btn-outline-primary Používáme pro sekundární akce jako např. tisk datové zprávy, zobrazení dalšího obsahu apod.
Sekundární btn-secondary Používáme pro sekundární akce jako např. tisk datové zprávy, zobrazení dalšího obsahu apod.

Inverzní tlačítko

Je stavem Outline a Sekundárního tlačítka při umístení na tmavém pozadí.

CSS identifikátor

btn-inverse

Velikosti tlačítek

  • Tlačítko použijte v různých velikostech v závislosti na prostoru, který máte na stránce
  • Pro důležitější akce použijte větší tlačítko
  • Velikost “Small” je vhodná především pro nižší třídy tlačítek
  • U tlačítek, která jsou umístěna v řádku vedle sebe, dodržujte vždy stejnou velikost
Velikost CSS třída Použití
Small btn-sm 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 btn-lg 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

(Angl. disabled button) je tlačítko, na které není možné kliknout např. proto, že akce, kterou spouštělo, již spuštěná je. Jedná se o velmi důležitý prvek a je vždy potřeba ošetřit, kde standardní tlačítko nahradit právě neaktivním tlačítkem. Uživatel by měl mít vždy aktivní taková tlačítka, která je, v daném kontextu situace, schopen (oprávněn) použít.

CSS identifikátor

btn-disabled

Ukázka 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.

Tlačítko jako odkaz

V případě, že má tlačítko pouze odkazovat na další statickou stránku, je vhodné ho vložit jako odkaz <a>. Použít můžete shodné CSS třídy jako pro <button>.

Příklad použití

Příklad použití tlačítka jako odkaz

Přesto, že se jedná o pouhý odkaz na stránku s formulářem, má tento odkaz podobu tlačítka.

Užitečné odkazy

Pravidla pro formuláře