FAB: Floating Action Button component for React

July 31, 2019 ยท View on GitHub

Back to Polythene FAB main page

FAB: Floating Action Button component for React

Options

FAB options

Usage

import React from "react"
import { FAB } from "polythene-react"

const iconSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>

<FAB mini icon={{ svg: { content: iconSVG } }} />

Instead of passing icon as option, the Icon component can be used as child:

import { FAB, Icon } from "polythene-react"

<FAB mini><Icon svg={{ content: iconSVG }} />

or even with Icon and SVG components:

import { FAB, Icon, SVG } from "polythene-react"

<FAB mini><Icon><SVG>{iconSVG}</SVG></Icon></FAB>

See: URLs and router links

Appearance

FAB's default colors are:

  • Background: the app's primary color; change this by setting the background-color style
  • Icon color: white; change this by setting the color style

Styling

Below are examples how to change the FAB appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { FABCSS } from "polythene-css"

FABCSS.addStyle(".themed-fab", {
  color_light_background: "#2196f3",
  color_dark_background:  "#0097a7",
  color_light:            "#fff",
  color_dark:             "#b2ebf2"
})

<FAB icon={{ svg: { content: starsSVG } }} className="themed-fab" />

CSS

Change CSS using the FAB CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/fab"

Style option

Some style attributes can be set using option style. For example:

<FAB
  icon={{ svg: { content: starsSVG } }}
  style={{ color: "#ef6c00" }}
/>

RTL (right-to-left) support

The direction of the FAB is flipped when:

  • it is contained within an element that either has attribute dir="rtl" or has className pe-rtl
  • has className pe-rtl--flip

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

  • Use tone: "dark" to render light on dark
  • Use tone: "light" to locally render normally when dark tone is set