Button
Release dato: 13.03.2023
Sist oppdatert: 07.07.2025
Button lar brukeren utfĂžre en handling, for eksempel Ă„ sende inn et skjema, starte en prosess eller navigere videre. Den skal vĂŠre tydelig, gi god tilbakemelding og plasseres der handlingen hĂžrer hjemme.
Test komponenten
Relaterte komponenter
NĂ„r brukeren skal navigere til en ny side.
NĂ„r du bare skal vise en status eller kategori.
NĂ„r brukeren skal tilbake til et tidligere steg.
Varianter
Skins
Buttons i Punkt har tre ulike varianter (skins).
| Skin | Bruk |
|---|---|
| Primary | Hovedhandling pÄ siden. Brukes én gang per flate |
| Secondary | For alternative eller mindre viktige handlinger |
| Tertiary | NÄr button ikke skal ta oppmerksomhet, f.eks. «Avbryt» |
StĂžrrelser
Button kan ogsÄ brukes i fire ulike stÞrrelser:
| StĂžrrelse | Bruk |
|---|---|
| Large | For ekstra oppmerksomhet |
| Medium (default) | Standard, og skal brukes som hovedregel |
| Small | For trange flater, som tabeller og kompakte skjema |
| XSmall | For ekstra trange flater, som kompakte tabeller og informasjonstette fagsystemer |
Farger
Button har ogsÄ flere mulige farger. Vi anbefaler Ä bruke standardfargen OsloblÄ, men du kan spe pÄ med andre farger i spesielle tilfeller.
| Farge | Bruk |
|---|---|
| Blue | Standardfarge. Bruk denne sÄ ofte som mulig |
| Blue outline | For spesielle tilfeller, bruk med mÄte |
| Green | For Ä bekrefte suksess, f.eks. «FullfÞr» |
| Green outline | For spesielle tilfeller, bruk med mÄte |
| Dark green | For spesielle tilfeller, bruk med mÄte |
| Darg green outline | For spesielle tilfeller, bruk med mÄte |
| Light beige | For spesielle tilfeller, bruk med mÄte |
| Dark beige outline | For spesielle tilfeller, bruk med mÄte |
| Yellow | For spesielle tilfeller, bruk med mÄte |
| Yellow outline | For spesielle tilfeller, bruk med mÄte |
| Red | For destruktive handlinger, som «Slett» |
| Red outline | For spesielle tilfeller, bruk med mÄte |
| Variant | Bruk |
|---|---|
| Label only | Kun tekst |
| Icon right | Tekst + ikon til hĂžyre |
| Icon left | Tekst + ikon til venstre |
| Icon right and left | Tekst + ikon til hĂžyre og til venstre |
| Icon only | Kun ikon, unngÄ bruk med mindre noe annet er mulig |
Retningslinjer for bruk
Bruk button nÄr
- brukeren skal utfÞre en konkret handling pÄ siden
- handlingen ikke innebÊrer Ä gÄ til en ny side
UnngÄ button nÄr
- handlingen er navigasjon til en ny side (bruk da heller en lenke)
- du vil vise status eller informasjon (bruk tag eller tabs)
Forskjellen mellom button og link
En tommelfingerregel er Ă„ skille mellom funksjonen til link og button:
- Bruk link nÄr brukeren skal komme til en ny side
- Bruk button nÄr brukerne skal utfÞre en konkret handling: logg inn, send, last opp osv.
Med det sagt, sÄ er ikke dette noe som er satt i stein. Det vil vÊre tilfeller der en button fungerer bedre enn en lenke selvom brukeren navigerer til en ny side, f.eks dersom det kun er én primÊrhandling brukeren kan gjÞre pÄ den aktuelle siden.
Skriv tydelige tekster
Teksten i button skal vĂŠre sĂ„ enkel og tydelig som mulig. Bruk aktivt sprĂ„k, gjerne verb i imperativ, og maks to â tre ord. Husk at teksten skal forklare hva som skjer.
GjĂžr slik
UnngÄ
Button er merkevarebĂŠrende
Buttons er noe av det brukeren legger mest merke til i en lÞsning. De signaliserer ikke bare handling, men ogsÄ stil og tone. Derfor er det viktig Ä bruke farger og former som stÞtter Oslos visuelle identitet og gir en gjenkjennelig opplevelse.
Bruk primÊrfargen (mÞrkeblÄ) som hovedregel. UnngÄ Ä bruke sterke farger som grÞnn, rÞd og gul hvis det ikke er nÞdvendig. Disse fargene skal kun brukes for Ä understÞtte et tydelig budskap, ikke for variasjon.
I Oslo kommunes lÞsninger bruker vi ikke buttons med avrundede hjÞrner. Formen skal vÊre tydelig, enkel og i trÄd med Oslo-profilen.
GjĂžr slik
UnngÄ
Responsivitet
Button tilpasser seg tilgjengelig plass og innhold. PÄ smÄ skjermer anbefaler vi Ä bruke fullbredde for Ä sikre god trykkflate. For kode har vi egne props/attributter for dette: fullWidth og fullWidthOnMobile.
UnngÄ mange buttons pÄ én rad. Da bÞr de stables vertikalt.
Universell utforming
Button skal fungere for alle brukere, derfor er det viktig at button
- er tilgjengelig med med tastaturnavigering og aktiveres med âEnterâ eller âSpaceâ
- viser tydelig fokusmarkering nÄr den er aktiv
UnngÄ deaktiverte buttons
Brukere forstÄr ofte ikke hvorfor en button er deaktivert. Derfor anbefaler vi Ä heller vise en feilmelding eller en hjelpetekst, enn Ä bruke disabled button.
Hvis du mÄ deaktivere en button, mÄ det vÊre tydelig for brukeren hvorfor den er deaktivert og hva som mÄ til for Ä aktivere den igjen.
Mer om universell utforming av buttons:
Tips og rÄd for hvordan du skriver tydelige og forstÄelige knappetekster i digitale lÞsninger.
En praktisk gjennomgang av kravene til minimumsstĂžrrelse for trykkbare elementer.
Anatomi
| Element | Beskrivelse |
|---|---|
| 1. Bakgrunn | Bakgrunnsfarge (evt. outline) |
| 2. Tekst (valgfritt) | Forklarer handlingen |
| 3. Ikon (valgfritt) | Kan stÄ uten, foran eller etter tekst |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import @oslokommune/punkt-elements/dist/pkt-button.js;import { PktButton } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/17/elements/pkt-button.js" type="module"></script>Testing
Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres:
await window.customElements.whenDefined("pkt-button");Overstyring av sti til loading-animasjon
I likhet med Icon-komponentens overstyring av sti til ikoner kan man overstyre stien til loading-animasjonen globalt ved Ă„ sette sti i window.pktAnimationPath.
Egenskaper
Props
- Prop:
-
size? - Type:
-
"xsmall" | "small" | "medium" | "large" - Standardverdi:
-
"medium" - Beskrivelse:
- Knappens stĂžrrelse
- Prop:
-
fullWidth?full-width? - Type:
-
boolean - Standardverdi:
-
false - Beskrivelse:
- Knappen tar full bredde av containeren
- Prop:
-
fullWidthOnMobile?full-width-on-mobile? - Type:
-
boolean - Standardverdi:
-
false - Beskrivelse:
- Knappen tar full bredde av containeren pÄ smÄ skjermer
- Prop:
-
skin? - Type:
-
"primary" | "secondary" | "tertiary" - Standardverdi:
-
"primary" - Beskrivelse:
- Er knappen primĂŠr, sekundĂŠr eller tertiĂŠr?
- Prop:
-
type? - Type:
-
"button" | "submit" | "reset" - Standardverdi:
-
"button" - Beskrivelse:
- Hvilken type knapp er dette?
- Prop:
-
color? - Type:
-
"blue" | "blue-outline" | "green" | "green-outline" | "green-dark" | "green-dark-outline" | "beige-light" | "beige-dark-outline" | "yellow" | "yellow-outline" | "red" | "red-outline" - Beskrivelse:
- Denne verdien overstyrer âskinâ/utseende
- Prop:
-
state? - Type:
-
"normal" | "focus" | "hover" | "active" - Beskrivelse:
- Her kan vi forhÄndsvise knappens tilstander
- Prop:
-
variant? - Type:
-
"label-only" | "icon-left" | "icon-right" | "icon-only" | "icons-right-and-left" - Standardverdi:
-
"label-only" - Beskrivelse:
- Med eller uten ikon eller tekst
- Prop:
-
iconName? - Type:
-
icon - Beskrivelse:
- Navn pÄ ikonet som skal vises
- Prop:
-
secondIconName? - Type:
-
icon - Beskrivelse:
- Navn pÄ det andre ikonet som skal vises
- Prop:
-
iconPath? - Type:
-
string - Beskrivelse:
- Sti til ikonet som skal vises
- Prop:
-
secondIconPath? - Type:
-
string - Beskrivelse:
- Sti til det andre ikonet som skal vises
- Prop:
-
isLoading? - Type:
-
boolean - Standardverdi:
-
false - Beskrivelse:
- Spinner for Ă„ vise at knappen er opptatt
- Prop:
-
disabled? - Type:
-
boolean - Standardverdi:
-
false - Beskrivelse:
- Deaktiverer knappen
Slots
- Slot:
-
default - Beskrivelse:
- Innholdet i knappen
Events
- Event:
-
onClick - Type:
- â
- Beskrivelse:
- Klikk-event for knappen