Vue 2 Reference > v-ons-fab

v-ons-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 component or in one of the corners. Normally it will be positioned in the lower right corner of the screen.

Tutorial

Floating action button

The Floating action button is a Material Design component that displays a circular button. It is normally displayed in the lower right corner and is used to represent the primary action of the app.

It is displayed using the VOnsFab component. To specify the position the position prop is used. To put an icon inside the button the VOnsIcon component can be used.

<v-ons-fab position='bottom right'>
  <v-ons-icon icon="md-face"></v-ons-icon>
</v-ons-fab>

In order to show or hide VOnsFab, the visible prop must be used.

See also

Props

Name Type Description
disabled Boolean Specify if button should be disabled. Optional.
modifier String The appearance of the button. 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 component. Optional.
ripple Boolean If this attribute is defined, the button will have a ripple effect when tapped. Optional.
visible Boolean Specify the visibility of the component. Optional.

Preset Modifiers

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.