Button

Knapp

Storybook

React Aria

Komponent som används för att låta användaren utföra en handling t.ex. spara ifylld information eller öppna ett formulär. När användaren interagerar med en knapp händer något på sidan.

import { Button, ButtonGroup } from '@midas-ds/components'

<ButtonGroup aria-label='Välj knapp'>
  <Button>Primary</Button>
  <Button variant='secondary'>Secondary</Button>
  <Button variant='tertiary'>Tertiary</Button>
</ButtonGroup>

Riktlinjer

Knappar placeras i regel i nedre vänstra hörnet av en sida, sektion eller tydligt avgränsad yta. Vi sätter alltid den primära knappen längst till vänster om det finns flera knappar (OK-Cancel).

<ButtonGroup aria-label='Skicka formulär'>
  <Button>Skicka</Button>
  <Button variant='secondary'>Avbryt</Button>
</ButtonGroup>

Varianter

Primär

Primärknappen används för den mest prioriterade handlingen (t.ex. Skicka eller Slutför) eller den positiva handlingen i ett flöde (t.ex. OK eller Nästa) och är därför utformad för att dra användarens uppmärksamhet till sig. För att ge användaren tydlig vägledning i gränssnittet bör antalet primärknappar i en och samma vy begränsas. Button har som standard variant='primary'.

<Button>Slutför</Button>

Sekundär

Sekundärknappen används för vanliga handlingar som inte är lika viktiga som primära handlingar eller för den negativa handlingen i ett flöde (t.ex. Avbryt eller Tillbaka).

<ButtonGroup aria-label='Välj knapp'>
  <Button>Slutför</Button>
  <Button variant='secondary'>Tillbaka</Button>
</ButtonGroup>

Tertiär

Den tertiära knappen används för de minst prioriterade handlingarna, t.ex. Ta bort eller Redigera.

<ButtonGroup aria-label='Hantera anmälan'>
  <Button>Slutför</Button>
  <Button variant='secondary'>Tillbaka</Button>
  <Button variant='tertiary'>Ta bort anmälan</Button>
</ButtonGroup>

Om den tertiära knappen används fristående från andra knappar ska den ha en ikon. Ikonen läggs till via icon. Vilken sida om texten som ikonen ska vara på styrs av iconPlacement.

<Button
  variant='tertiary'
  icon={Plus}
  iconPlacement='left'
>
  Lägg till rad
</Button>

Tillstånd

isDisabled

För att indikera att en handling inte är möjlig att utföra i aktuell kontext kan isDisabled användas. Av tillgänglighetsskäl är dock det bäst att undvika att använda isDisabled.

isPending

För att visa att systemet laddas kan isPending användas, läs mer under mönster för laddningsindikatorer.

<Button isPending>Laddar...</Button>

Implementation

Grupp av knappar

För att få korrekt layout på flertalet knappar kan komponenten ButtonGroup användas. Kom ihåg att sätta en aria-label på ButtonGroup för att beskriva vad knapparna gör.

import { ButtonGroup } from '@midas-ds/components'

<ButtonGroup aria-label='Välj en frukt'>
  <Button>Pineapple</Button>
  <Button variant='secondary'>Apple</Button>
</ButtonGroup>

Kontrollera flertalet knappar

För att kontrollera flertalet knappar kan ButtonContext användas runtom flertalet knappar för att kontrollera attribut på samtliga knappar på ett ställe.

import { ButtonContext } from 'react-aria-components'

<ButtonContext.Provider value={{ isPending: true }}>
  <ButtonGroup>
    <Button>Grape</Button>
    <Button variant='secondary'>Pear</Button>
  </ButtonGroup>
</ButtonContext.Provider>

API

Button

Name	Type	Default	Description
variant	"icon" | "primary" | "secondary" | "tertiary" | "danger"	'primary'	Primary button is used as a positive action in a flow. Always use one primary button and never a seconday button on it's own. When using just an icon you must pass an aria-label
fullwidth	boolean	false	Adds width: 100%; for the button to span entire width of parent
size	Size	'large'	Component size (large: height 48px, medium: height 40px)
icon	LucideIcon	-	Add an icon from lucide-react See Lucide
iconSize	number	20	Adjust icon size
iconPlacement	"left" | "right"	-	Display the icon on the left or right side of the button text
className	ClassNameOrFunction<ButtonRenderProps>	'react-aria-Button'	The CSS className for the element. A function may be provided to compute the class based on component state.
isPending	boolean	-	Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.
isDisabled	boolean	-	Whether the button is disabled.
autoFocus	boolean	-	Whether the element should receive focus on render.
type	"button" | "submit" | "reset"	'button'	The behavior of the button when used in an HTML form.
preventFocusOnPress	boolean	-	Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.
form	string	-	The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document. See MDN.
formAction	string | ((formData: FormData) => void | Promise<void>)	-	The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
formEncType	string	-	Indicates how to encode the form data that is submitted.
formMethod	string	-	Indicates the HTTP method used to submit the form.
formNoValidate	boolean	-	Indicates that the form is not to be validated when it is submitted.
formTarget	string	-	Overrides the target attribute of the button's form owner.
name	string	-	Submitted as a pair with the button's value as part of the form data.
value	string	-	The value associated with the button's name when it's submitted with the form data.
slot	string | null	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
children	ChildrenOrFunction<ButtonRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<ButtonRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"button", ButtonRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

ButtonGroup