Gjør
Bruk FABs for primære, positive handlinger som søk, legg til, rediger, innstillinger, favoritt, dele, chat osv.
Knapper
En flytende handlingsknapp (FAB) er en sirkulær form med et ikon i midten som flyter over brukergrensesnittet.
FloatingButton-props
Bruk FloatingButton når
Bruk FloatingButton når du vil fremheve den mest relevante eller vanligste brukerhandlingen i grensesnittet, som en sirkulær, flytende knapp over innholdet på skjermen.
Retningslinjer
FloatingButton finnes i to størrelser, medium (standard) og small, styrt av size-propen. Sender du inn både ikon og tekst som children (mer enn étt barn), blir knappen automatisk bredere («extended») med synlig tekst — dette styres av antall children, ikke en egen prop. Extended FAB krever ikke et eget ikon, i motsetning til vanlig FAB.
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 med en CSS-klasse, eller med inline styles:
<FloatingButton
{...otherProps}
style={{ position: 'fixed', top: '1em', right: '1em' }}
/>Du bør ha én, eller maks to, av disse på en side, siden de er veldig dominerende. En FAB skal ikke inneholde handlinger som finnes andre steder på skjermen.
Unngå
Unngå å bruke en FAB for mindre, uklare eller begrensede handlinger, som arkiver/sletting, varsler/feil, tekstjustering, klipp/lim eller skriftfarge — disse hører hjemme i en verktøylinje.