Hlavné a vedľajšie
Hlavné tlačidlo je pre najdôležitejšiu akciu časti stránky, napríklad Podporte nás alebo Odoslať prihlášku. V jednej časti stránky je najviac jedno. Ostatné akcie majú vedľajšie tlačidlo.
Tlačidlo, ktoré niečo vykoná, napríklad odošle formulár, je element button. Tlačidlo, ktoré vedie na inú stránku, je odkaz a so vzhľadom tlačidla.
<button class="button button--primary" type="submit">Odoslať prihlášku</button>
<a class="button button--secondary" href="…">Všetky aktuality</a>Skupina tlačidiel
Hlavné tlačidlo je v skupine prvé, vedľajšie za ním. Obal button-group ich oddelí medzerou --space-3. Na mobile sú pod sebou cez celú šírku, od 45 em vedľa seba.
<div class="button-group">
<button class="button button--primary" type="submit">Odoslať prihlášku</button>
<button class="button button--secondary" type="button">Uložiť na neskôr</button>
</div>Text na tlačidle
Text hovorí, čo sa stane: sloveso a ak treba, aj čo. Má najviac tri slová a nekončí bodkou.
| Nepíšeme | Píšeme |
|---|---|
| Kliknite sem | Stiahnuť logo |
| OK | Odoslať prihlášku |
| Viac | Všetky aktuality |
S ikonou
Ikona je pred textom a má 24 px (--icon-size-small). Za text patrí len šípka arrow_forward a ikona iného webu open_in_new, lebo ukazujú, kam tlačidlo vedie.
Tlačidlo len s ikonou má štvorcovú dotykovú plochu --tap (44 × 44 px) a názov akcie v aria-label, ktorý prečíta čítačka.
Stavy
Pri prejdení myšou hlavné tlačidlo stmavne (--bg-primary-hover), na výraznom pozadí zosvetlie na bielu. Vedľajšiemu zhrubne okraj.
Neaktívne tlačidlo je len vo formulári, kým nie je vyplnené, čo treba. Má prerušovaný obrys a vyblednutý text vo farbe textu pozadia, pre oba druhy rovnako. Pri ňom je vždy text, čo chýba. V HTML má atribút disabled, alebo aria-disabled="true", ak sa naň má dať prejsť klávesnicou.
Odosielanie
Po odoslaní formulára sa pred textom točí ikona progress_activity a text je „Odosiela sa…“. Tlačidlo si zachová vzhľad a ďalšie kliknutie nič neurobí, inak by sa formulár odoslal dvakrát. Zariadi to skript: nastaví aria-busy="true", vloží ikonu s triedou button__spinner a zmení text.
Na pozadiach
Na bielej a pieskovej ploche a na jemnom pozadí má hlavné tlačidlo primárnu farbu. Na výraznom pozadí má jemné pozadie a tmavý text tej istej farby (--bg-subtle-{farba}, --fg-{farba}). Vedľajšie tlačidlo preberá farbu textu pozadia. Sekcia s výrazným pozadím má triedu bg-strong-{farba} z base.css, farby sa potom nastavia samy.