menu

Knappar

Knappar ska i första hand används för funktioner. För navigation används primärt länkar istället.

Knapptyper

Du kan använda olika byggklossar till knappar. Kom ihåg att lägga till class="button" för att få rätt utseende.

Vi använder oss av fem olika typer av knappar enligt nedan.

Namn CSS-klass Beskrivning
.button.is-primary Används för att lyfta fram den knapp som är den mest troliga i sammanhanget.
OBS! Det får endast finnas en primär knapp per formulär/vy.
.button Används om du har flera knappar i samma formulär/vy.
.button.is-secondary Används för sekundära val som exempelvis "Avbryt". Den får aldrig stå för sig själv utan används alltid i kombination med en standardknapp eller primär knapp.
.button.is-dangerous Används för destruktiva val som exempelvis "Radera". Knappen ska i första hand placeras för sig själv, högerställd.
.button.is-inverted Används på färgpattor eller hero-bilder. Har en semi-transparent fyllning så att bakgrunden syns igenom (se exempel längre ner).

Exempel

Här visas några standardupplägg för placering av knappar i ett formulär. Grundregeln är att den primära knappen alltid placeras till vänster. Stödjande knappar (Standard och Sekundär) placeras antingen direkt till höger om eller högerställd. Destruktiva knappar placeras alltid högerställda.

Formulär med en primärknapp, en sekundärknapp och en destruktiv knapp.

Formulär med en primärknapp, en sekundärknapp och en standardknapp.

Exempel på inverterad knapp ovanpå en bild. som i en Hero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rerum reprehenderit tempora, architecto optio, omnis fugiat aliquid consectetur, reiciendis libero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rerum reprehenderit tempora, architecto optio, omnis fugiat aliquid consectetur, reiciendis libero.

Inaktiva knappar

När du sätter attributet disabled på en knapp går den inte längre att använda. Observera att om elementet för knappen inte är av typen <button> eller <input> måste även klassen .is-disabled läggas till för att den ska få rätt useende och beteende.

Exempel

Disabled Disabled

Disabled

Disabled

Blockknappar

Blockknappar använder hela bredden av det tillgängliga utrymmet. De finns i två varianter. En som allid är 100% bred .is-block och en som bara är det på små skärmar men annars beter sig som en vanlig knapp .is-mobile_block.

Exempel