Floating Action Button React Component

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

Floating Action Button React component represents Floating Action Button element.

Usage examples

Floating action button

<Fab color="pink" onClick={doSomething}>
  <Icon icon="icon-plus"></Icon>
</Fab>

Renders to:

<a href="#" class="floating-action-button color-pink">
  <i class="icon icon-plus"></i>
</a>

Speed Dial

<FabSpeedDial>
  <!-- Actions -->
  <FabActions>
    <FabAction color="pink" onClick={onActionClick}>A</FabAction>
    <FabAction color="orange" onClick={onActionClick}>B</FabAction>
    <FabAction color="green" onClick={onActionClick}>C</FabAction>
  </FabActions>
  <!-- FAB -->
  <Fab>
    <!-- First icon to open Actions -->
    <Icon icon="icon-plus"></Icon>
    <!-- Second icon to close Actions -->
    <Icon icon="icon-close"></Icon>
  </Fab>
</FabSpeedDial>

Renders to:

<div class="speed-dial">
  <!-- Actions -->
  <div class="speed-dial-buttons">
    <a href="#" class="pink">A</a>
    <a href="#" class="orange">B</a>
    <a href="#" class="green">C</a>
  </div>
  <!-- FAB -->
  <a href="#" class="floating-action-button color-pink">
    <i class="icon icon-plus"></i>
    <i class="icon icon-close"></i>
  </a>
</div>

Properties

Prop	Type	Description
<Fab>
color	string	Button color. One of default colors
<FabSpeedDial>
theme	string	Actions theme color. One of default colors
<FabActions>
theme	string	Actions theme color. One of default colors
<FabAction>
closeSpeedDial	boolean	Enable and speed dial will be closed on this button click
color	string	Action button color. One of default colors