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

    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
    <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

    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 bottomMd 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:add" md="material:add"></Icon>
          <Icon ios="f7:close" 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:add" md="material:add"></Icon>
          <Icon ios="f7:close" 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:add" md="material:add"></Icon>
          <Icon ios="f7:close" 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:add" md="material:add"></Icon>
          <Icon ios="f7:close" md="material:close"></Icon>
        </Fab>
    
        {/* FAB Right Bottom (Orange) */}
        <Fab position="right-bottom" slot="fixed" color="orange">
          <Icon ios="f7:add" md="material:add"></Icon>
          <Icon ios="f7:close" 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:add" 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>
    )