ionic-framework/core/src/components/fab-button

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

Property	Attribute	Description	Type
activated	activated	If true, the fab button will be show a close icon. Defaults to false.	boolean
color	color	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.	Color
disabled	disabled	If true, the user cannot interact with the fab button. Defaults to false.	boolean
href	href	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.	string
mode	mode	The mode determines which platform styles to use. Possible values are: "ios" or "md".	Mode
routerDirection	router-direction	When using a router, it specifies the transition direction when navigating to another page using href.	RouterDirection
show	show	If true, the fab button will show when in a fab-list.	boolean
translucent	translucent	If true, the fab button will be translucent. Defaults to false.	boolean

---

Built with StencilJS