inFakt Styleguide

Buttony

Style dla przycisków mogą być nadane dla dowolnego elementu html. Głównie powinny być używane dla <a> lub <button>.

Przyciski akcji, wykorzystywane w tabelach i listingach

<button class="btn btn--light">Click</button>

<button class="btn btn--light btn--ok">Oznacz jako załacone</button>

<button class="btn btn--light btn--delete">Usuń</button>

<button class="btn btn--light btn--send-email">Wyślij</button>

<button class="btn btn--light btn--print">Drukuj</button>

<button class="btn btn--light btn--add">Dodaj</button>

<button class="btn btn--light btn--history-invoices">Faktury</button>

<button class="btn btn--light btn--history-correspondence">E-maile</button>

<button class="btn btn--light btn--edit">Edytuj</button>

Przyciski akcji – niebieskie



<button class="btn blue">Button</button>

<button class="btn blue btn--ok">Button</button>

<button class="btn blue btn--search">Button</button>

<button class="btn blue btn--next">Button</button>

<button class="btn blue btn--add-white">Button</button>

<br><br>

<button class="btn btn--big blue">Button</button>

<button class="btn btn--big blue btn--ok">Button</button>

<button class="btn btn--big blue btn--search">Button</button>

<button class="btn btn--big blue btn--next">Button</button>

<button class="btn btn--big blue btn--add-white">Button</button>

Przyciski akcji – zielone



<button class="btn green">Button</button>

<button class="btn green btn--ok">Button</button>

<button class="btn green btn--search">Button</button>

<button class="btn green btn--next">Button</button>

<button class="btn green btn--add-white">Button</button>

<br><br>

<button class="btn btn--big green">Button</button>

<button class="btn btn--big green btn--ok">Button</button>

<button class="btn btn--big green btn--search">Button</button>

<button class="btn btn--big green btn--next">Button</button>

<button class="btn btn--big green btn--add-white">Button</button>

Przyciski akcji – pomarańczowe



<button class="btn orange">Button</button>

<button class="btn orange btn--ok">Button</button>

<button class="btn orange btn--search">Button</button>

<button class="btn orange btn--next">Button</button>

<button class="btn orange btn--add-white">Button</button>

<br><br>

<button class="btn btn--big orange">Button</button>

<button class="btn btn--big orange btn--ok">Button</button>

<button class="btn btn--big orange btn--search">Button</button>

<button class="btn btn--big orange btn--next">Button</button>

<button class="btn btn--big orange btn--add-white">Button</button>

Przyciski akcji – czerwone



<button class="btn red">Button</button>

<button class="btn red btn--ok">Button</button>

<button class="btn red btn--search">Button</button>

<button class="btn red btn--next">Button</button>

<button class="btn red btn--add-white">Button</button>

<br><br>

<button class="btn btn--big red">Button</button>

<button class="btn btn--big red btn--ok">Button</button>

<button class="btn btn--big red btn--search">Button</button>

<button class="btn btn--big red btn--next">Button</button>

<button class="btn btn--big red btn--add-white">Button</button>

Przyciski akcji – białe



<button class="btn">Button</button>

<button class="btn btn--add">Button</button>

<br><br>

<button class="btn btn--big">Button</button>

<button class="btn btn--big btn--add">Button</button>