FAB: Floating Action Button

A circular main button with a Shadow and Ripple effect.

Differences from a Raised Button behavior:

• The ripple emanates from the center of the button
• The ripple has a 2/3 decay speed
• No selected state

• FAB: Floating Action Button
  • Main features
  • Usage
  • Options
    • Button options
    • FAB specific options
    • Common component options
  • Composition
  • CSS classes
  • Future

Main features

• All Button main features
• Custom icon
• Display mini size

Usage

• Usage with Mithril
• Usage with React

Options

Button options

See:

• Button options

FAB specific options

Parameter	Required	Type	Default	Description
icon	use icon or content	Object		Icon options object
mini	optional	Boolean	false	Set to true to display a small button (class name pe-fab--mini)

Common component options

Parameter	Required	Type	Default	Description
after	optional	String, hyperscript or component		Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth
before	optional	String, hyperscript or component		Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth
className	optional	String		Extra CSS class appended to pe-fab
content	either icon or content	String, hyperscript or component		Alternative content
element	optional	String	"div"	HTML element tag
events	optional	Object		Options object containing one or more standard events such as onclick (React: onClick)
id	optional	String		HTML element id
style	optional	Object		For setting simple style attributes
tabindex (React: tabIndex)	optional	Integer		Tab index
tone	optional	String: "dark" or "light"		Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone)

Composition

FAB is composed from:

• Button
• Icon (when using option icon)

CSS classes

• FAB classes

Future

"The floating action button animates onto the screen as an expanding piece of material, by default. The icon within it may be animated."

"The floating action button can transform into a toolbar upon press or scroll. The toolbar can contain related actions, text and search fields, or any other items that would be useful at hand."

"The floating action button can fling out related actions upon press."

"The floating action button can transform into a single piece of material which contains all the actions."

"The floating action button can transform into sheets of material that are part of the app structure."