Floating Action Button React Component

Floating Action Button React Component

Floating action buttons (FABs) 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.

FAB Components

There are following components included:

Fab / F7Fab - main FAB element
FabButtons / F7FabButtons - wrapper for multiple FAB buttons used as Speed Dial FAB
FabButton / F7FabButton - single FAB Speed Dial button
FabBackdrop / F7FabBackdrop - FAB backdrop element

FAB Properties

Prop	Type	Default	Description
<Fab> properties
href	string boolean		URL of the page to load (if set). Will set `href` attribute on main FAB link. In case of boolean `href=”false”` it won’t add `href` tag
target	string		Value of link target attribute, e.g. `_blank`, `_self`, etc.
position	string	right-bottom	FAB position. Can be one of the following: `right-bottom` `center-bottom` `left-bottom` `right-center` `center-center` `left-center` `right-top` `center-top` `left-top`
morphTo	string		String CSS selector of the FAB morph target
text	string		FAB Button text. If specified, then it will be displayed as Extended Fab with text label
tooltip	string		FAB tooltip text to show on button hover/press
tooltipTrigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover` or `click`. If `hover` tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices
<FabButtons> properties
position	string	top	Speed dial buttons position, can be one of the following: `top` - buttons will appear on top of FAB `right` - buttons will appear on right of FAB `bottom` - buttons will appear on bottom of FAB `left` - buttons will appear on left of FAB `center` - buttons will appear around of FAB
<FabButton> properties
fabClose	boolean	false	When enabled then clicking on this button will close the FAB
target	string		Value of link target attribute, e.g. `_blank`, `_self`, etc.
label	string		Button text label
tooltip	string		Button tooltip text to show on button hover/press
tooltipTrigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover` or `click`. If `hover` tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices

FAB Events

Event	Description
<Fab> events
click	Event will be triggered after click on FAB
<FabButton> events
click	Event will be triggered after click on FAB Speed Dial button

FAB Slots

FAB React component (<Fab>) has additional slots for custom elements:

default - child element will be inserted inside of the main FAB link <a> element. But if the child is FabButtons, then it will be inserted in the end of the main FAB element
link - child element will be inserted inside of the main FAB link <a> element
root - child element will be inserted in the end of the main FAB element
text - child element will be inserted in the text element of the Extended FAB

Examples

export default () => (
  <Page>
    <Navbar title="Floating Action Button" />
    {/* Toolbar FAB Morph Target */}
    <Toolbar bottom className="fab-morph-target">
      <Link>Link 1</Link>
      <Link>Link 2</Link>
      <Link>Link 3</Link>
    </Toolbar>
    {/* FAB Left Top (Yellow) */}
    <Fab position="left-top" slot="fixed" color="yellow">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
      <FabButtons position="bottom">
        <FabButton>1</FabButton>
        <FabButton>2</FabButton>
        <FabButton>3</FabButton>
      </FabButtons>
    </Fab>
    {/* FAB Right Top (Pink) */}
    <Fab position="right-top" slot="fixed" color="pink">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
      <FabButtons position="left">
        <FabButton>1</FabButton>
        <FabButton>2</FabButton>
        <FabButton>3</FabButton>
      </FabButtons>
    </Fab>
    {/* FAB Center (Green) */}
    <Fab position="center-center" slot="fixed" color="green">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
      <FabButtons position="center">
        <FabButton>1</FabButton>
        <FabButton>2</FabButton>
        <FabButton>3</FabButton>
        <FabButton>4</FabButton>
      </FabButtons>
    </Fab>
    {/* FAB Left Bottom (Blue) */}
    {/* Will morph to Toolbar */}
    <Fab position="left-bottom" slot="fixed" morphTo=".toolbar.fab-morph-target">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
    </Fab>
    {/* FAB Right Bottom (Orange) */}
    <Fab position="right-bottom" slot="fixed" color="orange">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
      <FabButtons position="top">
        <FabButton label="Action 1">1</FabButton>
        <FabButton label="Action 2">2</FabButton>
      </FabButtons>
    </Fab>
    {/* Extended FAB Center Bottom (Red) */}
    <Fab position="center-bottom" slot="fixed" text="Create" color="red">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
    </Fab>
    <Block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias ... voluptatibus eligendi.</p>
    </Block>
  </Page>
)

With Backdrop

export default () => (
  <Page>
    <Navbar title="FAB Backdrop" />
    {/* FAB Backdrop */}
    <FabBackdrop slot="fixed" />
    {/* FAB Right Bottom */}
    <Fab position="right-bottom" slot="fixed">
      <Icon ios="f7:plus" aurora="f7:plus" md="material:add"></Icon>
      <Icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></Icon>
      <FabButtons position="top">
        <FabButton label="Action 1">1</FabButton>
        <FabButton label="Action 2">2</FabButton>
      </FabButtons>
    </Fab>
    <Block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias ... voluptatibus eligendi.</p>
    </Block>
  </Page>
)

← Contacts List

Gauge →