ion-fab-button
Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an <ion-fab-button>FAB</ion-fab-button>. They need to be wrapped with an <ion-fab> component in order to be fixed over the content.
If the FAB button is not wrapped with <ion-fab>, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
Properties
activated
boolean
If true, the fab button will be show a close icon. Defaults to false.
color
string
The color to use from your application's color palette.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information on colors, see theming.
disabled
boolean
If true, the user cannot interact with the fab button. Defaults to false.
href
string
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
mode
string
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
show
boolean
If true, the fab button will show when in a fab-list.
translucent
boolean
If true, the fab button will be translucent. Defaults to false.
Attributes
activated
boolean
If true, the fab button will be show a close icon. Defaults to false.
color
string
The color to use from your application's color palette.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
For more information on colors, see theming.
disabled
boolean
If true, the user cannot interact with the fab button. Defaults to false.
href
string
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
mode
string
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
show
boolean
If true, the fab button will show when in a fab-list.
translucent
boolean
If true, the fab button will be translucent. Defaults to false.
Built with StencilJS