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
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.