React Reference > Fab Component

<Fab />

The Floating action button is a circular button defined in the Material Design specification. They are often used to promote the primary action of the app. It can be displayed either as an inline element or in one of the corners. Normally it will be positioned in the lower right corner of the screen.

Usage 

<SpeedDial disabled={false} direction='right' onClick={() => console.log('test1')} position='left bottom'>
     <Fab>
       <Icon icon='fa-twitter' size={26} fixedWidth={false} style={{verticalAlign: 'middle'}} />
     </Fab>
     <SpeedDialItem onClick={() => console.log('speed A')}> A </SpeedDialItem>
     <SpeedDialItem onClick={() => console.log('speed B')}> B </SpeedDialItem>
     <SpeedDialItem onClick={() => console.log('speed C')}> C </SpeedDialItem>
     <SpeedDialItem onClick={() => console.log('speed D')}> D </SpeedDialItem>
   </SpeedDial>

Props

[improve this]
Name Type Description
modifier string The appearance of the button. Optional.
ripple bool If true, the button will have a ripple effect when tapped. Optional.
position string The position of the button. Should be a string like "bottom right" or "top left". If this attribute is not defined it will be displayed as an inline element. Optional.
disabled bool If true, the button will be disabled. Optional.
onClick func This function will be called ones the button is clicked. Optional.

Preset Modifiers

[improve this]
Name Description
mini Makes the ons-fab smaller.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.