React Reference > SpeedDial Component

<SpeedDial />

Element that displays a Material Design Speed Dialog component. It is useful when there are more than one primary action that can be performed in a page. The Speed dial looks like a Fab element but will expand a menu when tapped.

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 speed dial. Optional.
position string

Specify the vertical and horizontal position of the component. I.e. to display it in the top right corner specify “right top”. Choose from “right”, “left”, “top” and “bottom”.

Optional.
direction enum Specify the direction the items are displayed. Possible values are “up”, “down”, “left” and “right”. Optional.
disabled bool Specify if button should be disabled. Optional.

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.