FAB

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Import

import { FAB } from '@rn-vui/themed';

Theme Key

FAB

Usage

Variants

<Stack row align="center" spacing={4}>
  <FAB
    size="small"
    icon={{
      name: "place",
      color: "white",
    }}
  />
  <FAB size="small" title="Solid" />
  <FAB
    size="small"
    title="Extended"
    icon={{
      name: "place",
      color: "white",
    }}
  />
</Stack>

Props

note

Includes all Button props.

Name	Type	Default	Description
color	string		Change the color of the FAB.
placement	left | right		FAB placement at bottom, (optional) use style in case of custom placement.
size	small | large	large	Change Size of FAB.
style	View Style		Style for FAB
upperCase	boolean		Transform Extended Label text to uppercase.
visible	boolean	true	Decide the visibility of the FAB.

Playground

Loading...