Button

Jeden z nejrozšířenějších prvků vůbec umožňující uživateli spustit určitou událost.

Druh

Aby tlačítko co nejlépe koresponodvalo s okolním obsahem, je možno využít klasického vzhledu se stínem nebo plochého tlačítka bez stínu a pozadí.

<button class="btn">
    <span class="btn-caption">Raised</span>
</button>

<button class="btn flat">
    <span class="btn-caption">Flat</span>
</button>

UPPERCASE

Pro zobrazení textu velkými písmeny vložte do stylů @uppercase-button: true.

Velikost

<button class="btn">
    <span class="btn-caption">Default</span>
</button>

<button class="btn btn-large">
    <span class="btn-caption">Large</span>
</button>

Barva

Výchozí pozadí obou typů tlačítek jsou neutrální barvy, text potom nese primární barvu aplikace. Barvu textu lze změnit na červenou v případě destruktivní akce nebo v případě potřeby na zelenou. Má-li jedno konkrétní tlačítko vizuálně vystupovat z obsahu, lze použít tzv. primární tlačítko. Blokovaná tlačítka jsou potom provedena v odstínech šedi.

<button class="btn">
    <span class="btn-caption">Odeslat</span>
</button>

<button class="btn success">
    <span class="btn-caption">Povolit</span>
</button>

<button class="btn error">
    <span class="btn-caption">Smazat</span>
</button>

<button class="btn Disabled">
    <span class="btn-caption">Upravit</span>
</button>

<!-- Primary -->

<button class="btn primary">
    <span class="btn-caption">Odeslat</span>
</button>

<button class="btn success primary">
    <span class="btn-caption">Povolit</span>
</button>

<button class="btn error primary">
    <span class="btn-caption">Smazat</span>
</button>

<button class="btn Disabled primary">
    <span class="btn-caption">Upravit</span>
</button>

Ikona

Obsah tlačítka lze rozšířit o ikonu. V případě, že ikona zcela postačuje, je možné popisek zcela skrýt.

<button class="btn btn-large flat">
    <span class="btn-caption">Diktovat</span>
</button>

<button class="btn btn-large flat icon com-mic">
    <span class="btn-caption">Diktovat</span>
</button>

<button class="btn btn-large flat icon com-mic no-caption">
    <span class="btn-caption">Diktovat</span>
</button>

Dropdown

Slouží-li tlačítko k zobrazení dropdown menu, je dobrým zvykem zobrazovat na pravé straně ikonu šipky.

<button class="btn btn-large">
    <span class="btn-caption">Typ</span>
    <span class="btn-dropdown-icon icon ui-chevron-bottom-small"></span>
</button>

<button class="btn btn-large icon shop-box">
    <span class="btn-caption">Sklad</span>
    <span class="btn-dropdown-icon icon ui-chevron-bottom-small"></span>
</button>

<button class="btn btn-large flat icon settings-gear no-caption">
    <span class="btn-caption">Možnosti</span>
    <span class="btn-dropdown-icon icon ui-chevron-bottom-small"></span>
</button>

Počítadlo

Kromě vyvolání akce může tlačítko zobrazovat informaci o počtu ovlivněných záznamů.

<button class="btn btn-large">
    <span class="btn-caption">Odeslat</span>
    <span class="counter" data-counter="2"></span>
</button>

<button class="btn btn-large primary icon ui-forward">
    <span class="btn-caption">Přeposlat</span>
    <span class="counter" data-counter="8"></span>
</button>

<button class="btn btn-large error icon editorial-trash no-caption">
    <span class="btn-caption">Smazat</span>
    <span class="counter" data-counter="41"></span>
</button>

dev