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 elementFabButtons
/F7FabButtons
- wrapper for multiple FAB buttons used as Speed Dial FABFabButton
/F7FabButton
- single FAB Speed Dial buttonFabBackdrop
/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:
|
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:
|
<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 isFabButtons
, then it will be inserted in the end of the main FAB elementlink
- child element will be inserted inside of the main FAB link<a>
elementroot
- child element will be inserted in the end of the main FAB elementtext
- 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>
)