Floating button

npm install @entur/button

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

Varianter

FloatingButton

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, small og extended.

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

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.

<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

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.

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.

Universell utforming

Følg våre generelle råd om knapper og disabled states.

Props

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

Denne komponenten har ingen props