Viktig informasjon
Delar av dette innhaldet er ikkje tilgjengeleg på nynorsk enno.
- Accordion
- Alert
- Breadcrumbs
- Button
- Card
- Checkbox
- CheckboxGroup
- Chips
- DatePicker
- DescriptionList
- Divider
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUploader
- Footer
- Icon
- IconButton
- InlineButton
- Link
- LinkGroup
- MegaButton
- Modal
- NavigationTile
- OpenClose
- Pagination
- Panel
- Popover
- RadioGroup
- RolePicker
- ScrollToTopButton
- SearchField
- Select
- Spinner
- StepList
- Table
- Tabs
- Tag
- TextArea
- TextField
- TopBannerExternal
- TopBannerInternal
- Typografi
- Versjonshistorikk
- WordInfo
Button
Pakke: ds-buttons
Button (knapp) brukes til viktige handlinger på siden, for eksempel knapperader i bunnen av et skjema. Knappene deles inn i primær-, sekundær-, tertiær- og fare-knapper.
Eksempler
Egnet til:
- knapperader i skjema eller i dialogbokser.
- primær- og sekundærhandlinger på siden.
Uegnet til:
- å plassere inni en tabell eller andre steder hvor det er begrenset plass.
- å fremheve et ikon alene. Bruk da IconButton i stedet.
- å bruke som lenke til nye områder. Bruk MegaButton i stedet.
Teknisk dokumentasjon
Varianter
Det er fire ulike knappevarianter. Alle kan brukes med eller uten ikon.
Primær
Brukes om den mest sentrale funksjonen, det viktigste brukeren kan utføre på siden.
Sekundær
Funksjonen for denne knappen er mindre sentral enn primær.
Tertiær
Advarsel
En advarselsknapp kan brukes for å understreke et alvor ved en handling, typisk at noe ikke kan reverseres. Du bør minimere risikoen for at knappen ikke trykkes på ved et uhell, for eksempel ved å plassere den i god avstand fra andre handlinger og sørge for at advarselknapp ikke har tastaturfokus fra start.
Hvordan bruke komponenten
Skill mellom primær- og sekundærhandlinger
Bruk primær-, sekundær- og tertiærknappene aktivt for vise brukeren hvilke funksjoner som er mer eller mindre sentrale.
Gjør slik:
Advarselknapp for handlinger det ikke går an å angre på
En advarselsknapp kan brukes for å understreke et alvor ved en handling, typisk at noe ikke kan reverseres. Du bør minimere risikoen for at knappen ikke trykkes på ved et uhell, for eksempel ved å plassere den i god avstand fra andre handlinger og sørge for at advarselknapp ikke har tastaturfokus fra start.
Gjør slik:
Unngå inaktive knapper
Inaktive knapper kan være utfordrende for brukere å oppfatte og forstå, og vi anbefaler at du unngår å bruke dem. I stedet bør knappen alltid være aktiv. Dersom skjemaet eller siden inneholder feil, slik at brukeren ikke kan navigere seg videre når knappen trykkes på, skal du vise fornuftige feilmeldinger ved siden av knappen. I interne løsninger kan det imidlertid være ok å bruke inaktive knapper for å øke effektiviteten.
Gjør slik:
Tekst i komponenten
- En knapp bør ha en kort og konsis beskrivelse av handlingen den utfører.
- Velg verb i oppfordringsform (imperativ) på knapper for å vise brukerne at de kan utføre en handling. Eksempler på oppfordringsform er «send», «signer», «endre».
- Unngå bare store bokstaver. Det gjør teksten vanskeligere å lese.
- Start knappeteksten med stor forbokstav.
Vær konsekvent
- Husk å bruke de samme begrepene på knappetekster som går igjen i tjenestene. Velg for eksempel om du skal skrive «Neste» eller «Videre».
Les mer om knappetekster i Skatteetatens skriveregler.
Universell utforming
- Bruk korte, forståelige tekster i knappen. Det skal være lett å skjønne hva målet med knappen er. Se også skrivereglene for hvordan skrive på knapper.
- Ikke bruk knappen for å navigere videre til et annet område.
- Bruk aktiv knapp med feilmelding i stedet for inaktiv (disabled) knapp fordi:
- inaktiv knapp har dårlig kontrast mot bakgrunn.
- det kan være vanskelig for folk å vite om knappen kan trykkes på.
- folk kan kan gå glipp av endring fra inaktiv til aktiv.
- noen skjermlesere leser ikke elementer som er inaktive.
- Ikonet i button er skjult for skjermleser fordi det er regnes som pynt.