KOMPONENTER

Floating action button

npmv3.2.35

En flytende handlingsknapp (FAB) er en sirkulær form med et ikon i midten som flyter over brukergrensesnittet.

npm install @entur/button

@import '@entur/button/dist/styles.css';

FloatingButton-props

Button text

Komponenter

FloatingButton

import { FloatingButton } from '@entur/button';

Navn	Type	Default-verdi	Beskrivelse
`aria-label?`	`string`		Beskrivende tekst for skjermlesere Defines a string value that labels the current element. @see aria-labelledby.
`children?`	`ReactNode`		Ikon eller ikon-og-tekst
`className?`	`string`		Ekstra klassenavn
`onClick?`	`((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void) & MouseEventHandler<HTMLButtonElement>`		Callback når knappen klikkes
`size?`	`"small" \| "medium"`	`"medium"`	Størrelse på knappen

<FloatingButton /> kan ha et ikon, eller ikon og tekst. Ikonet kan være til venstre eller til høyre for teksten.

Denne typen knapp bør være "sticky" på toppen av eksisterende innhold, men denne posisjoneringen må du gjøre selv - enten ved hjelp av en CSS-klasse, eller med inline styles:

<FloatingButton
  {...otherProps}
  style={{ position: 'fixed', top: '1em', right: '1em' }}
/>

Du bør ha en eller maks to av disse på en side, siden de er veldig dominerende.

Retningslinjer for bruk

Funksjonelt representerer den flytende handlingsknappen (FAB) den mest relevante eller vanligste brukerhandlingen i grensesnittet. Den flyter over alt innhold på skjermen, vanligvis i en sirkulær form med et ikon i midten. FABs kommer i tre varianter: default, mini og extended.

Extended FAB er bredere og inneholder en tekst. I motsetning til default FABs, krever ikke extended FAB et ikon.

Det er innafor å bruke bare ikoner i FABs, men bare hvis man sørger for at de er kontekstrelevante, intuitive og tydelig illustrerer handlingene for brukerne. En FAB skal ikke inneholde handlinger som finnes andre steder på skjermen.

Eksempel

Her er et eksempel med FABs som ligger over kartet i reiseplanleggeren, hvor man fremhever de handlingene som er mest relevant og oftest brukt i denne applikasjonen.

Kart som illustrerer bruk av floating action button

Prinsipper

Bruk FABs for primære, positive handlinger som for eksempel søk, legg til, rediger, innstillinger, favoritt, dele, chat osv.

Unngå å bruk en FAB for mindre, uklare eller begrensede handlinger som for eksempel arkiver/søppel, varsler/feil, kontroller for å justere tekst, klipp/lim eller skriftfarge som hører hjemme i en verktøylinje.