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
Samotný princip vyvýšení bez konkrétních příkladů použití je poměrně abstraktní koncept. Prozkoumejte tedy možnosti využití hierarchie stínů.
<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>