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.

Live demo

Relaterte komponenter

Varianter

Skins

Buttons i Punkt har 3 ulike varianter (skins) og 3 ulike størrelser.

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 tre ulike størrelser:

Størrelse	Bruk
Small	For trange flater, som tabeller
Medium (default)	Standard, og skal brukes som hovedregel
Large	For ekstra oppmerksomhet

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.

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:

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?

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.

Props og tokens

Prop	Type	Beskrivelse
`size`	`small` `medium` `large`	Knappens størrelse
`skin`	`primary` `secondary` `tertiary`	Er knappen primær, sekundær eller tertiær?
`type`	`button` `submit` `reset`	Hvilken type knapp er dette?
`color`	`blue` `blue-outline` `green` `green-outline` `green-dark` `green-dark-outline` `beige-light` `beige-dark-outline` `yellow` `yellow-outline` `red` `red-outline`	Denne verdien overstyrer ‘skin’/utseende
`state`	`normal` `focus` `hover` `active`	Her kan vi forhåndsvise knappens tilstander
`variant`	`label-only` `icon-left` `icon-right` `icon-only` `icons-right-and-left`	Med eller uten ikon eller tekst
`iconName`	`icon`	Navn på ikonet som skal vises
`secondIconName`	`icon`	Navn på det andre ikonet som skal vises
`isLoading`	`boolean`	Spinner for å vise at knappen er opptatt
`disabled`	`boolean`	Deaktiverer knappen

Slot (children)	Beskrivelse
`default`	Innholdet i knappen

Event	Beskrivelse
`onClick`	Klikk-event for knappen

Farger

Element	CSS Variabel
Background/border
Text

Du kan bruke flere farger fra fargepalleten (se alle mulighetene under varianter), men sørg alltid for å teste at du har god nok kontrast til bakgrunnen button ligger på.