Hoppa till huvudinnehåll

Button

Knapp
Version: 1.1.1
Versionslogg
Storybook
Referens

Introduktion​

Knappar används när användaren vill utföra en handling t.ex. spara ifylld information eller öppna ett formulär.

Installation och användning​

npm install @midas-ds/button
import { Button } from '@midas-ds/button'

Primärknapp​

Den primära knapp används för den primära/positiva handlingar i ett flöde (OK ,Skicka, Nästa). Det bör endast finnas en primärknapp per sida/sektion/tydligt avgränsad yta.

Sekundär knapp​

Sekundär knapp används för underordnade/negativa handlingar i ett flöde (Avbryt, Tillbaka).

Tertiär knapp​

Den tertiära knappen kan användas tillsammans med primär- och sekundärknapp där det finns behov av ett ytterligare val


Om den tertiära knappen används fristående från andra knappar ska den ha en ikon. Ikonen läggs till via icon. Du kan välja vilken sida av texten ikonen ska vara på med iconPlacement.

import { Plus } from 'lucide-react'
;<Button
  icon={Plus}
  variant='tertiary'
>
  Lägg till rad
</Button>

Små knappar​

För interna system finns det en liten version av knapparna som kan användas där det är ont om utrymme. Byt till liten knapp med size="small"

Riktlinjer​

Val av komponent​

Se mönstret Knappar och länkar

Generella riktlinjer​

  • Alla knappar i externa system ska gå att interagera med. Om användaren inte uppfyllt kraven (t.ex för att gå till nästa sida i en etjänst) ska ett felmeddelande visas som påtalar vad som krävs för att kunna gå vidare.
  • Undvik att ha för många knappar på samma sida.

Placering och ordning​

Knappar placeras i regel i nedre vänstra hörnet. Vi sätter alltid den primära knappen till vänster. Undantaget är flerstegsflöden såsom e-tjänster, se nedan.


I flerstegsflöden, som t.ex. e-tjänster, sätts alltid den primära knappen (nästa) till höger och den sekundära (tillbaka) till vänster. Flödet går från vänster till höger (som att bläddra i en bok) och knapparna motsvarar detta.

Beroenden​

  • @midas-ds/theme@^0.5.23