Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

FabButton

[ion-fab]

Improve this doc

FABs (Floating Action Buttons) are standard material design components. They are shaped as a circle that represents a promoted action. When pressed, it may contain more related actions. FABs as its name suggests are floating over the content in a fixed position. This is not achieved exclusively with <button ion-fab>Button</button> but it has to wrapped with the <ion-fab> component, like this:

<ion-content>
 <!-- Real floating action button, fixed. It will not scroll with the content -->
 <ion-fab>
   <button ion-fab>Button</button>
 </ion-fab>

 <!-- Button shaped as a circle that just like a normal button scrolls with the content -->
 <button ion-fab>Button</button>
</ion-content>

In case the button is not wrapped with <ion-fab>, the fab button will behave like a normal button, scrolling with the content.

See [ion-fab] to learn more information about how to position the fab button.

Usage

<!-- Colors -->
<ion-fab>
  <button ion-fab color="primary">Button</button>
</ion-fab>

<!-- Mini -->
<ion-fab>
  <button ion-fab mini>Small</button>
</ion-fab>

Attributes:

Attribute Description
mini Makes a fab button with a reduced size.

Input Properties

Attr Type Details
color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

Sass Variables

Property Default Description
$fab-size 56px

Width and height of the FAB button

$fab-mini-size 40px

Width and height of the FAB button mini

$fab-content-margin 10px

Margin of the FAB Container

$fab-list-margin 10px

Margin of the FAB List

$fab-list-button-background-color #f4f4f4

Background color of the button in a list

Property Default Description
$fab-ios-background-color color($colors-ios, primary)

Background color of the button

$fab-ios-text-color color-contrast($colors-ios, $fab-ios-background-color)

Text color of the button

$fab-ios-background-color-activated color-shade($fab-ios-background-color)

Background color of the activated button

$fab-ios-list-button-background-color $fab-list-button-background-color

Background color of the button in a list

$fab-ios-list-button-text-color color-contrast($colors-ios, $fab-ios-list-button-background-color)

Text color of the button in a list

$fab-ios-list-button-background-color-activated color-shade($fab-ios-list-button-background-color)

Background color of the activated button in a list

$fab-ios-list-button-transition-duration 200ms

Transition duration of the transform and opacity of the button in a list

$fab-ios-list-button-transition-timing-function ease

Speed curve of the transition of the transform and opacity of the button in a list

$fab-ios-list-button-transition-delay 10ms

Transition delay of the transform and opacity of the button in a list

Property Default Description
$fab-md-box-shadow 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1)

Box shadow of the FAB button

$fab-md-box-shadow-activated 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1)

Box shadow of the activated FAB button

$fab-md-background-color color($colors-md, primary)

Background color of the button

$fab-md-text-color color-contrast($colors-md, $fab-md-background-color)

Text color of the button

$fab-md-background-color-activated color-shade($fab-md-background-color)

Background color of the activated button

$fab-md-list-button-background-color $fab-list-button-background-color

Background color of the button in a list

$fab-md-list-button-text-color color-contrast($colors-md, $fab-md-list-button-background-color)

Text color of the button in a list

$fab-md-list-button-background-color-activated color-shade($fab-md-list-button-background-color)

Background color of the activated button in a list

$fab-md-list-button-transition-duration 200ms

Transition duration of the transform and opacity of the button in a list

$fab-md-list-button-transition-timing-function ease

Speed curve of the transition of the transform and opacity of the button in a list

$fab-md-list-button-transition-delay 10ms

Transition delay of the transform and opacity of the button in a list

Property Default Description
$fab-wp-background-color color($colors-wp, primary)

Background color of the button

$fab-wp-text-color color-contrast($colors-wp, $fab-wp-background-color)

Text color of the button

$fab-wp-background-color-activated color-shade($fab-wp-background-color)

Background color of the activated button

$fab-wp-list-button-background-color $fab-list-button-background-color

Background color of the button in a list

$fab-wp-list-button-text-color color-contrast($colors-wp, $fab-wp-list-button-background-color)

Text color of the button in a list

$fab-wp-list-button-background-color-activated color-shade($fab-wp-list-button-background-color)

Background color of the activated button in a list

$fab-wp-list-button-transition-duration 200ms

Transition duration of the transform and opacity of the button in a list

$fab-wp-list-button-transition-timing-function ease

Speed curve of the transition of the transform and opacity of the button in a list

$fab-wp-list-button-transition-delay 10ms

Transition delay of the transform and opacity of the button in a list

Related

FAB Component Docs

API

Native

General