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`
`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