Przyciski(ang. Buttons)

Wyróżniamy dwa rodzaje przycisków:
– Przyciski podstawowe
– Przyciski-ikony

Każdy z wyżej wymienionych rodzajów przycisków może występować:
– w wersji na jasne i ciemne tło
– pojedynczo lub w grupie

Przyciski podstawowe

Ten rodzaj przycisków stosowany jest do inicjowania akcji o wysokim priorytecie.

  <button class="full-button">
    <span class="button__label">priorytetowy</span>
  </button>

  <button class="border-button">
    <span class="button__label">standardowy</span>
  </button>

1. Etykieta

   Powinna być krótka i jasno wskazywać na wywoływaną akcję (zalecane są czasowniki). Rekomendowany limit tekstu to 1 linijka na wszystkich rozdzielczościach.

2. Ikona towarzysząca etykiecie opcjonalna

   Może znajdować się po prawej lub po lewej stronie etykiety, jednak preferowana jest prawa strona. Musi mieć ten sam kolor co etykieta. Ikony należy stosować rozważnie, tzn. tylko wówczas, gdy wnoszą dodatkową wartość. Najczęściej stosowanymi ikonami jest ikona linku zewnętrznego, ikona pobierania, ikony symbolizujące różne formaty plików oraz strzałki.

3. Kontener

   Wyznacza granice przycisku.

Cały przycisk jest klikalny.

Warianty

Przycisk pierwszego stopnia (ang. Primary button)

Przycisk wywołujący akcje o najwyższym priorytecie. Nie powinien się pojawiać więcej niż raz na jednej stronie.

<button class="full-button">
  <span class="button__label">priorytetowy</span>
</button>

<button class="full-button">
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
  <span class="button__label">Ikona po lewej</span>
</button>

<button class="full-button">
  <span class="button__label">Ikona po prawej</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

Przycisk wywołujący akcje o najwyższym priorytecie. Nie powinien się pojawiać więcej niż raz na jednej stronie.

Przycisk drugiego stopnia(ang. Secondary Button)

<button class="border-button">
  <span class="button__label">standardowy</span>
</button>

<button class="border-button button--icon-left">
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
  <span class="button__label">Ikona po lewej</span>
</button>

<button class="border-button button--icon-right">
  <span class="button__label">Ikona po prawej</span>
  <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
</button>

Inicjuje akcje o mniejszym priorytecie.

Grupy

Przyciski podstawowe o różnym stopniu priorytetu lub przyciski drugiego stopnia mogą tworzyć grupę.

<div class="buttons-group">
  <button class="full-button">
    <span class="button__label">priorytetowy</span>
  </button>

  <button class="border-button">
    <span class="button__label">standardowy</span>
  </button>
</div>

W przypadku przycisków o różnym priorytecie, najczęściej przycisk z większym priorytetem znajduje się po lewej stronie. Możliwe jest jednak umieszczenie przycisku pierwszego stopnia po prawej stronie, np. w modalach.

W uzasadnionych przypadkach dopuszczalne jest grupowanie przycisków z różnym umieszczeniem ikon (po prawej lub po lewej stronie).

Przyciski-ikony

Ten rodzaj przycisków stosowany jest do wywoływania mniej istotnych akcji wówczas, gdy sama ikona wystarczy do opisania istoty akcji. Może także służyć do wywoływania typowych akcji systemowych, np. “Usuń”.

<div class="buttons-group">
  <button aria-label="lorem ipsum" class="icon-button">
    <i aria-hidden="true" class="mdi icon mdi-magnify"></i>
  </button>
  <button aria-label="lorem ipsum" class="icon-button">
    <i aria-hidden="true" class="mdi icon mdi-account"></i>
  </button>
  <button aria-label="lorem ipsum" class="icon-button">
    <i aria-hidden="true" class="mdi icon mdi-cart"></i>
  </button>
</div>

1. Ikona

   Najczęściej stosowaną ikoną jest strzałka.

2. Kontener opcjonalna

   Wyznacza granice przycisku. Może mieć formę prostokąta lub koła.

Cały przycisk jest klikalny.

Warianty

Na jasnym tle może wystąpić w jednej z dwóch opcji kolorystycznych:

1. Szarej

   Jest to podstawowy wariant przycisków-ikon.

2. Czerwonej

   Wariant stosowany w wyjątkowych sytuacjach w celu wyróżnienia przycisków spośród innych elementów.

<button aria-label="lorem ipsum" class="icon-button">
  <i aria-hidden="true" class="mdi icon mdi-magnify"></i>
</button>
<button aria-label="lorem ipsum" class="icon-button--red">
  <i aria-hidden="true" class="mdi icon mdi-magnify"></i>
</button>

Grupy

Przyciski - ikony również mogą tworzyć grupę. Rekomendowany limit przycisków-ikon w grupie to 3.

<div class="buttons-group">
  <button aria-label="lorem ipsum" class="icon-button">
    <i aria-hidden="true" class="mdi icon mdi-magnify"></i>
  </button>
  <button aria-label="lorem ipsum" class="icon-button">
    <i aria-hidden="true" class="mdi icon mdi-account"></i>
  </button>
  <button aria-label="lorem ipsum" class="icon-button">
    <i aria-hidden="true" class="mdi icon mdi-cart"></i>
  </button>
</div>

Zasady stosowania

Krótkie i jednoznaczne etykiety

Należy stosować krótkie, zwięzłe, ale jednoznaczne etykiety, wzywające do działania (np. “Wyślij” zamiast “Ok”).

Etykiety wskazujące na wywoływane akcje

Etykiety powinny jasno określać akcje, które wywołują, szczególnie w przypadku bardziej złożonych lub mniej jednoznacznych kontekstów. Przykładowo, jeśli proces jest wieloetapowy, lepiej jest napisać ,,Przejdź do podsumowania” zamiast “Przejdź” albo “Dalej”.

Odpowiedni kontrast

Ważne jest zachowanie odpowiedniego kontrastu przycisk-tło (dla poziomu dostępności AA to minimum 3:1 z wyjątkiem przycisków nieaktywnych).

Grupa przycisków pierwszego i drugiego stopnia

przyciski pierwszego i drugiego stopnia. Wówczas przycisk pierwszego stopnia powinien znajdować się po lewej stronie.

Grupa przycisków drugiego stopnia lub grupa ikon

W przypadku akcji o tym samym priorytecie, należy stworzyć grupę złożoną z przycisków drugiego stopnia lub z przycisków-ikon.

Ikony po tej samej stronie

Grupę mogą tworzyć także przyciski z ikonami umiejscowionymi po tej samej stronie. W uzasadnionych przypadkach zezwala się na odstępstwo od tej reguły.

Zbyt dużo przycisków pierwszego stopnia

Nie należy nadużywać przycisków pierwszego stopnia. Najlepiej jest ograniczyć się do jednego takiego przycisku na stronie.

Zbędne ikony

Nie powinno się stosować ikon, jeśli nie ułatwiają one zrozumienia akcji wykonywanej przez przycisk.

Długie etykiety

Długie, niejasne, zbyt ogólne etykiety utrudniają rozumienie. Etykieta nie powinna być dłuższa niż 1 linijka na wszystkich rozdzielczościach.

Zbyt duża grupa

Przycisków w grupie nie powinno być zbyt dużo - zwłaszcza przycisków podstawowych. Dobrą praktyką jest stosowanie maksymalnie dwóch przycisków podstawowych lub trzech przycisków-ikon.

Mieszana grupa

W ramach jednej grupy nie należy mieszać przycisków różnego rodzaju.

Dwa przyciski pierwszego stopnia

Przyciski pierwszego stopnia nie mogą tworzyć razem grupy.

• Przyciski w wersji na ciemne tło

  Pokazane poniżej przyciski należy stosować jedynie na ciemnym tle.

  priorytetowy Ikona po lewej Ikona po prawej

  
  <button class="full-button">
    <span class="button__label">priorytetowy</span>
  </button>
  
  <button class="full-button">
    <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
    <span class="button__label">Ikona po lewej</span>
  </button>
  
  <button class="full-button">
    <span class="button__label">Ikona po prawej</span>
    <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
  </button>
  
  

  Default Ikona po lewej Ikona po prawej

  
  <button class="border-button--inverse">
    <span class="button__label">Default</span>
  </button>
  
  <button class="button--icon-left border-button--inverse">
    <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
    <span class="button__label">Ikona po lewej</span>
  </button>
  
  <button class="button--icon-right border-button--inverse">
    <span class="button__label">Ikona po prawej</span>
    <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
  </button>
  
  

  
  <button aria-label="lorem ipsum" class="icon-button--inverse">
    <i aria-hidden="true" class="mdi icon mdi-magnify"></i>
  </button>
  <button aria-label="lorem ipsum" class="icon-button--inverse">
    <i aria-hidden="true" class="mdi icon mdi-account"></i>
  </button>
  <button aria-label="lorem ipsum" class="icon-button--inverse">
    <i aria-hidden="true" class="mdi icon mdi-cart"></i>
  </button>