Buttons: floating action button

A floating action button (FAB) represents the primary action of a screen.

Android Web Flutter iOS check

Interactive demo

This demo lets you preview the FAB component, its variations, and configuration options. Each tab displays a different type of FAB.


Usage

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: regular, mini, and extended.

Only use a FAB if it is the most suitable way to present a screen's primary action.

DoRepresent the most common primary action with a floating action button, such as drafting a new email.
DoFABs are not needed on every screen, such as when images represent primary actions.
Don'tDon't display multiple FABs on a single screen.
CautionOccasionally two FABs can be used, if they perform distinct, yet equally important, actions.

Principles

Primary

A FAB represents the primary action on a screen.

Constructive

A FAB should perform a constructive action (such as create, share, or explore).

Contextual

A FAB should be relevant to the screen on which it appears.


Anatomy

Black circle with a centered white plus icon
1. Container
2. Icon

Container

The FAB is typically displayed in a circular container. An app's color scheme determines its color fill, which should contrast with the area behind the...

The FAB is typically displayed in a circular container. An app's color scheme determines its color fill, which should contrast with the area behind the FAB.

FAB containers come in two sizes:
1. Default (56 x 56dp)
2. Mini (40 x 40dp)

A mini FAB should be used on smaller screens. When a screen width is 460dp or less, the container of a default FAB (56dp) should transform into the mini size (40dp).

Mini FABs can also be used to create visual continuity with other screen elements.

This mini FAB creates visual continuity by having a related size, shape, and placement to the folder icons below it.
DoFAB containers adopt a color from an app's palette.
Don'tDon't layer badges or other elements in front of a FAB.

Icon

A FAB's icon should clearly illustrate its action. A FAB shouldn’'t contain notifications or actions found elsewhere on a screen.

A FAB's icon should clearly illustrate its action. A FAB shouldn't contain notifications or actions found elsewhere on a screen.

Don'tDon't use ambiguous iconography.
Don'tDon't place text in a regular FAB.

Placement

FABs can attach to top app bars and the edge of some components.

DoA floating action button (FAB) can attach to a top app bar.
DoA FAB can be attached to the edge of a component.
Don'tIndividual components, such as cards, cannot each have their own FAB.

Behavior

Actions

A floating action button (FAB) can trigger an action either on the current screen, or it can perform an action that creates a new screen....

A floating action button (FAB) can trigger an action either on the current screen, or it can perform an action that creates a new screen.

A FAB promotes an important, constructive action such as:

  • Create
  • Favorite
  • Share
  • Start a process

Avoid using a FAB for minor or destructive actions, such as:

  • Archive or trash
  • Alerts or errors
  • Limited tasks like cutting text
  • Controls better suited to a toolbar (like controls to adjust volume or font color)
DoUse FABs for primary, positive actions.
Don'tDo not use FABs for minor, overflow, unclear, or destructive actions.

Motion

When a FAB animates on screen, it expands outward from a central point. The icon within it may be animated as well. While FABs should...

Appearing on screen

When a FAB animates on screen, it expands outward from a central point. The icon within it may be animated as well.

While FABs should be relevant to screen content, they aren't attached to the surface on which content appears. FABs move separately from other UI elements because of their relative importance.

Screen transitions

FABs can morph to launch related actions. When a screen changes its layout, the FAB should disappear and reappear during the transition.

Reappearance

The FAB should only reappear if it's relevant to the new screen. It should reappear in the same position, if possible.

Throughout this user flow the FAB location remains consistent.

Tabbed screens

When tabs are present, the FAB should briefly disappear, then reappear when the new content moves into place. This expresses that the FAB is not...

When tabs are present, the FAB should briefly disappear, then reappear when the new content moves into place. This expresses that the FAB is not connected to any particular tab.

DoWhen switching between tabs, FABs disappear and then reappear.
Don'tWhen switching between tabs, FABs don't move in unison with screen content.

Types of transitions

Speed dial

When pressed, a FAB can display three to six related actions in the form of a speed dial. This transition can occur in one of...

When pressed, a FAB can display three to six related actions in the form of a speed dial. This transition can occur in one of the following ways:

  • Upon press, the FAB can emit related actions
  • Upon press, the FAB can transform into a menu containing related actions (Android only)

If more than six actions are needed, something other than a FAB should be used to present them.

Emit related actions

Upon press, the FAB remains visible and emits a stack of related actions. If the FAB is tapped in this state, it should either initiate its default action or close the speed dial actions.

A FAB displays a stack of related actions.
Don'tA speed dial should include at least three options.
Don'tA speed dial should include no more than six options.
DoA FAB can contain a list of contacts.
DoRelated actions can have text labels.
Don'tA FAB shouldn't transform into unrelated actions.
Don'tSpeed dial options shouldn't include an overflow menu.

Transform into a menu with the related actions

Upon press on Android, the FAB can transform into a menu containing related actions. A scrim indicates that functionality outside of the action menu is temporarily disabled. The menu remains on-screen until an action, or the scrim, is tapped.

A FAB transforming into an action menu
Don'tDon't use an action menu with fewer than three options.
Don'tAn action menu shouldn't include more than six options, as action menus don't support scrolling.

Transformations

The FAB uses a container transform transition pattern to transform into various surfaces.


Within the screen

The FAB can transform into another surface in an app. Morphing should be reversible and transform the new surface back into the FAB.

The FAB can transform into another surface in an app. Morphing should be reversible and transform the new surface back into the FAB.

A FAB can morph into a surface that is part of the app structure.

Full screen

The FAB can transform into a new surface that spans the entire screen. This type of transformation is typically for creating new content.

The FAB can transform into a new surface that spans the entire screen. This type of transformation is typically for creating new content.

A FAB can transform into a new surface that spans the entire screen.

Extended FAB

The extended FAB is wider, and it includes a text label.

Extended FAB

Anatomy

The width of an extended FAB’s container can be fixed or fluid. The icon of an extended FAB should intuitively represent its action. The text...

1. Container
2. Icon (optional)
3. Text label

Container

The width of an extended FAB’s container can be fixed or fluid.

  • A fixed width container is defined by the cumulative width of the icon, text label, and padding.
  • A fluid width container is defined by its relationship to something else on screen, such as screen width or the layout grid.
This fixed extended FAB's width is defined by the cumulative width of the icon, text label, and container padding.
This extended FAB's container width is defined by the layout grid columns.

Icon

The icon of an extended FAB should intuitively represent its action.

Icons should be placed to the left of text labels for left-to-right languages.
Icons should be placed to the right for right-to-left languages.
DoUnlike standard FABs, extended FABs don't require an icon.
Don'tAn extended FAB can't have an icon without a text label.

Text label

The text label of an extended FAB should describe its action.

CautionOnly truncate text if shorter text isn't an option.
Don'tAvoid wrapping text.

Placement

The extended FAB can be positioned in the center, left, or right side of a screen. For UIs larger than 840dp, such as desktop, the...

The extended FAB can be positioned in the center, left, or right side of a screen.

Desktop and tablet

For UIs larger than 840dp, such as desktop, the extended FAB should be placed at the top left of the screen, or at the bottom right of the screen.

On desktop, the extended FAB placed at the top left
On desktop, the extended FAB placed at the bottom right

Mobile

On mobile, the extended FAB should be placed at the bottom right or bottom center.

On mobile, the extended FAB placed at the bottom center
On mobile, the extended FAB placed at the bottom right
CautionAvoid using an extended FAB above a bottom app bar, as the combination takes up a lot of screen space. If they are paired, the extended FAB should collapse on scroll.

Behavior

Extended FABs have speed dial options, and can transform into standard FABs if space is limited

Speed dial

The extended FAB can also display a speed dial of 3-6 related actions when tapped. On hover, these related actions expand to display labels.

During the speed dial transition, the extended FAB becomes a standard FAB.

Extended FAB speed dial

Transformation to a standard FAB

If space becomes limited, the extended FAB can transform into a standard FAB. For example, if an app viewport is resized below 840dp, or a navigation drawer opens up.

Extended FAB transforming into a standard FAB

An extended FAB can transform into a standard FAB when a screen is scrolled.

The FAB should not return to an extended FAB until the user scrolls back to the top of the page.

Extended FAB transforming into a standard FAB after the user scrolls to the top of the page

Theming

Reply Material Theme

This email app’s floating action button has been customized using Material Theming. Areas of customization include color and shape. Reply is an email app that...

This email app's floating action button has been customized using Material Theming. Areas of customization include color and shape.

Reply's customized FAB

Color

Reply's extended FAB uses custom color on two elements: the container, icon, and text.

Element Category Attribute Value
Container Secondary Color
Opacity
#FAAB1A
100%
Icon On Secondary Color
Opacity
#232F34
100%
Text On Secondary Color
Opacity
#232F34
100%

Typography

Reply's extended FAB uses custom typography on its button text.

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Work Sans
ExtraBold
15
All caps

Shape

Reply's floating action button uses a custom shape on the container.

Element Category Attribute Value
Container Small component Family
Size
Rounded
50%

Posivibes Material Theme

This social media app's floating action button has been customized using Material Theming. Areas of customization include color and shape. The Material Design color system...

This social media app's floating action button has been customized using Material Theming. Areas of customization include color and shape.

Posivibes' customized FAB

Color

Posivibe's FAB uses custom color on two elements: the container and icon.

Element Category Attribute Value
Container Secondary Color
Opacity
#000000
100%
Icon On Secondary Color
Opacity
#FFFFFF
100%

Shape

Posivibes' FAB uses a custom shape on its container. *Posivibes' FABs use an override of the small component shape category size value.

Element Category Attribute Value
Container Override* Family
Size
Cut
50%

Shrine Material Theme

This retail app's extended floating action button has been customized using Material Theming. Areas of customization include color, typography, and shape. The Material Design color...

This retail app's extended floating action button has been customized using Material Theming. Areas of customization include color, typography, and shape.

Shrine's customized FAB

Color

Shrine's extended FAB uses custom color on two elements: the container and text.

Element Category Attribute Value
Container Primary Color
Opacity
#FEDBD0
100%
Text On Primary Color
Opacity
#442C2E
100%

Typography

Shrine's extended FAB uses custom typography on its button text.

Element Category Attribute Value
Text Button Typeface
Font
Size
Case
Rubik
Medium
14
All caps

Shape

Shrine's extended FAB uses a custom shape on its container.

Element Category Attribute Value
Container Small component Family
Size
Cut
4;4;4;4dp

Specs

Floating action button

#000000ff R0 G0 B0 A1.00 Elevation 6dp All corners Rounded: 28dp All measurements are displayed in device-independent pixels (dps) #000000ff R0 G0 B0 A1.00 Elevation...

Regular

  • Measurement 56
  • Measurement 16
  • Measurement 16
  • Measurement C
  • Measurement 24
 

Mini FAB

  • Measurement 40
  • Measurement 8
  • Measurement 8
  • Measurement C
  • Measurement 24
 

Placement

  • Measurement 16
  • Measurement 16
 

Extended floating action button

14dp #ffffff #000000ff R0 G0 B0 A1.00 Elevation 6dp All corners Rounded: 32dp All measurements are displayed in device-independent pixels (dps) Elevation 6dp All corners...

  • Measurement 48
  • Measurement 12
  • Measurement 12
  • Measurement 20
  • Measurement C
  • Measurement 24
 

Placement

  • Measurement 8
 

Using FABs

A FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Before you can use Material FABs, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Note: If the FloatingActionButton is a child of a CoordinatorLayout, you get certain behaviors for free. It will automatically shift so that any displayed Snackbars do not cover it, and will automatially hide when covered by an AppBarLayout or BottomSheetBehavior.

Making FABs accessible

You should set a content description on a FAB via the android:contentDescription attribute or setContentDescription method so that screen readers like TalkBack are able to announce their purpose or action. Text rendered in Extended FABs is automatically provided to accessibility services, so additional content labels are usually unnecessary.

Visibility

Use the show and hide methods to animate the visibility of a FloatingActionButton or an ExtendedFloatingActionButton. The show animation grows the widget and fades it in, while the hide animation shrinks the widget and fades it out.

Extending and Shrinking

Use the extend and shrink methods to animate showing and hiding the text of an ExtendedFloatingActionButton. The extend animation extends the FAB to show the text and the icon. The shrink animation shrinks the FAB to show just the icon.

Sizing FABs

The FloatingActionButton can be sized either by using the discrete sizing modes or a custom size.

There are three app:fabSize modes:

  • normal - the normal sized button, 56dp.
  • mini - the mini sized button, 40dp.
  • auto (default) - the button size will change based on the window size. For small sized windows (largest screen dimension < 470dp) this will select a mini sized button, and for larger sized windows it will select a normal sized button.

Or, you can set a custom size via the app:fabCustomSize attribute. If set, app:fabSize will be ignored, unless the custom size is cleared via the clearCustomSize method.

Types

There are three types of FABS: 1. Regular FABs, 2. Mini FABs, 3. Extended FABs

FAB types

Regular FABs

Regular FABs are FABs that are not expanded and are a regular size.

API and source code:

Regular FAB example

The following example shows a regular FAB with a plus icon.

56dp round teal FAB with black plus icon

In the layout:

In code:

Anatomy

Regular FAB anatomy diagram

A regular FAB has a container and an icon.

  1. Container
  2. Icon

Mini FABs

A mini FAB should be used on smaller screens.

Mini FABs can also be used to create visual continuity with other screen elements.

API and source code:

Mini FAB example

The following example shows a mini FAB with a plus icon.

40dp round teal FAB with black plus icon

In the layout:

In code:

Anatomy

Mini FAB anatomy diagram

A mini FAB has a container and an icon.

  1. Container
  2. Icon

Regular and mini FAB key properties

Container attributes

ElementAttributeRelated method(s)Default value
Colorapp:backgroundTintsetBackgroundTintList
getBackgroundTintList
?attr/colorSecondary (see all states)
Strokeapp:borderWidthN/A0.5dp
Sizeapp:fabSize
app:fabCustomSize
setSize
setCustomSize
clearCustomSize
getSize
getCustomSize
auto
ShapeshapeAppearance
shapeAppearanceOverlay
setShapeAppearanceModel
getShapeAppearanceModel
?attr/shapeAppearanceSmallComponent
Elevationapp:elevationsetElevation
getCompatElevation
6dp
Hovered/Focused elevationapp:hoveredFocusedTranslationZsetCompatHoveredFocusedTranslationZ
getCompatHoveredFocusedTranslationZ
2dp
Pressed elevationapp:pressedTranslationZsetCompatPressedTranslationZ
getCompatPressedTranslationZ
6dp
Rippleapp:rippleColorsetRippleColor
getRippleColor
getRippleColorStateList
variations of ?attr/colorOnSecondary, see all states
Motionapp:showMotionSpec
app:hideMotionSpec
set*MotionSpec
set*MotionSpecResource
get*MotionSpec
see animators

Icon attributes

ElementAttributeRelated method(s)Default value
Iconapp:srcCompatsetImageDrawable
setImageResource
getDrawable
null
Colorapp:tintsetImageTintList
getImageTintList
?attr/colorOnSecondary (see all states)

Styles

ElementStyle
Default styleWidget.MaterialComponents.FloatingActionButton

Default style theme attribute: ?attr/floatingActionButtonStyle

See the full list of styles and attrs.

Extended FABs

The extended FAB is wider, and it includes a text label.

Note: ExtendedFloatingActionButton is a child class of MaterialButton, rather than FloatingActionButton. This means that several attributes which are applicable to FloatingActionButton have different naming in ExtendedFloatingActionButton. For example, FloatingActionButton uses app:srcCompat to set the icon drawable, whereas ExtendedFloatingActionButton uses app:icon. See the attributes tables below for more details.

API and source code:

Extended FAB example

The following example shows an extended FAB with a plus icon.

Teal FAB with plus icon and "Extended" label

In the layout:

In code:

Anatomy and key properties

Extended FAB anatomy diagram

An extended FAB has a text label, a transparent container and an optional icon.

  1. Container
  2. Icon (Optional)
  3. Text label

Container attributes

ElementAttributeRelated method(s)Default value
Colorapp:backgroundTintsetBackgroundTintList
getBackgroundTintList
?attr/colorSecondary (see all states)
Stroke colorapp:strokeColorsetStrokeColor
getStrokeColor
null
Stroke widthapp:strokeWidthsetStrokeWidth
getStrokeWidth
0dp
Sizeapp:collapsedSizeN/A
Shapeapp:shapeAppearance
app:shapeAppearanceOverlay
setShapeAppearanceModel
getShapeAppearanceModel
?attr/shapeAppearanceSmallComponent
Elevationapp:elevationsetElevation
getElevation
6dp
Hovered/Focused elevationapp:hoveredFocusedTranslationZN/A2dp
Pressed elevationapp:pressedTranslationZN/A6dp
Rippleapp:rippleColorvariations of ?attr/colorOnSecondary, see all states
Motionapp:showMotionSpec
app:hideMotionSpec
extendMotionSpec
shrinkMotionSpec
set*MotionSpec
set*MotionSpecResource
get*MotionSpec
see animators

Icon attributes

ElementAttributeRelated method(s)Default value
Iconapp:iconsetIcon
setIconResource
getIcon
null
Colorapp:iconTintsetIconTint
setIconTintResource
getIconTint
?attr/colorOnSecondary (see all states)
Sizeapp:iconSizesetIconSize
getIconSize
24dp
Padding between icon and textapp:iconPaddingsetIconPadding
getIconPadding
16dp

Text label

ElementAttributeRelated method(s)Default value
Text labelandroid:textsetText
getText
null
Colorandroid:textColorsetTextColor
getTextColor
?attr/colorOnSecondary (see all states)
Typographyandroid:textAppearancesetTextAppearance?attr/textAppearanceButton

Styles

ElementStyle
Default styleWidget.MaterialComponents.ExtendedFloatingActionButton.Icon
Text-only when
extended style
Widget.MaterialComponents.ExtendedFloatingActionButton

Default style theme attribute: ?attr/extendedFloatingActionButtonStyle

See the full list of styles and attrs.

Theming FABs

FAB theming example

API and source code:

The following example shows a regular, mini, and extended FABs with Material Theming.

"3 square pink FABs with cut corners with brown plus icons: 56dp, 40dp, 56dp
with "Extended" label"

Implementing FAB theming

Using theme attributes and styles in res/values/styles.xml (themes all FABs and affects other components):

Or using a default style theme attribute, styles and a theme overlay (themes all FABs but does not affect other components):

or using one of the styles in the layout (affects only this FAB):

No Android implementation guidance available

Using FABs

A FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Installation

Styles

Loading icons

We recommend using Material Icons from Google Fonts:

However, you can also use SVG, Font Awesome, or any other icon library you wish.

JavaScript instantiation

The FAB will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element. See MDC Ripple for details.

See Importing the JS component for more information on how to import JavaScript.

Making FABs accessible

Material Design spec advises that touch targets should be at least 48px x 48px. While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FABs:

Note: The outer mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

Regular FABs

Regular FABs are FABs that are not expanded and are a regular size.

Regular FAB example

Note: The floating action button icon can be used with a span, i, img, or svg element.

Note: IE 11 will not center the icon properly if there is a newline or space after the material icon text.

Mini FABs

A mini FAB should be used on smaller screens.

Mini FABs can also be used to create visual continuity with other screen elements.

Mini FAB example

Extended FABs

The extended FAB is wider, and it includes a text label.

Extended FAB example

Note: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.

API

CSS classes

CSS ClassDescription
mdc-fabMandatory, for the button element
mdc-fab__iconMandatory, for the icon element
mdc-fab__rippleMandatory, for the element which shows the ripple.
mdc-fab__labelOptional, for the text label. Applicable only for Extended FAB.
mdc-fab--miniOptional, modifies the FAB to a smaller size
mdc-fab--extendedOptional, modifies the FAB to wider size which includes a text label.
mdc-fab--exitedOptional, animates the FAB out of view.
When this class is removed, the FAB will return to view.

A note about :disabled: No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does not perform an action, you should also present an explanation to the user.

Sass mixins

Basic Sass mixins

MDC FAB uses MDC Theme's secondary color by default. Use the following mixins to customize it.

MixinDescription
accessible($container-color)Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.
extended-fluidMakes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within @media queries.

Advanced Sass mixins

A note about advanced mixins: The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.

MixinDescription
container-color($color)Sets the container color to the given color
icon-size($width, $height)Sets the icon width, height, and font-size properties to the specified width and height. $height is optional and will default to $width if omitted. The font-size will be set to the provided $width value.
ink-color($color)Sets the ink color to the given color
extended-padding($icon-padding, $label-padding)Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, $label-padding will apply to both sides.
extended-label-padding($label-padding)Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.
shape-radius($radius, $rtl-reflexive)Sets rounded shape to only regular & mini FAB variants with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
extended-shape-radius($radius, $rtl-reflexive)Sets rounded shape to only Extended FAB variant with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
No Web implementation guidance available

Using FABs

A FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center.

Before you can use Material FABs, you need to import the Material Components package for Flutter:

You need to be using a MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making FABs accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Types

There are three types of FABS: 1. Regular FABs, 2. Mini FABs, 3. Extended FABs

Regular FAB example

Regular FABs

Regular FABs are FABs that are not expanded and are a regular size.

FloatingActionButton

The following example shows a regular FAB.

"Regular FAB example for Flutter with white '+' icon over a black background."

Anatomy and key properties for regular FAB

Regular FAB anatomy diagram

A regular FAB has a container and an icon.

  1. Container
  2. Icon

Container attributes for regular FAB

 Property
ColorbackgroundColor
Stroke colorcolor of side on a custom shape
Stroke widthwidth of side on a custom shape
Shapeshape
Elevationelevation
Ripple colorsplashColor

Icon attributes for regular FAB

 Property
Iconchild
ColorforegroundColor
Sizesize on child when using an Icon

Mini FABs

A mini FAB should be used on smaller screens.

Mini FABs can also be used to create visual continuity with other screen elements.

Mini FABs example

FloatingActionButton

The following example shows a mini FAB.

"Mini FAB example for Flutter with white '+' icon over a black background."

Anatomy and key properties for mini FAB

Mini FAB anatomy diagram

A mini FAB has a container and an icon.

  1. Container
  2. Icon

Container attributes for mini FAB

 Property
ColorbackgroundColor
Stroke colorcolor of side on a custom shape
Stroke widthwidth of side on a custom shape
Shapeshape
Elevationelevation
Ripple colorsplashColor

Icon attributes for mini FAB

 Property
Iconchild
ColorforegroundColor
Sizesize on child when using an Icon

Extended FABs

The extended FAB is wider, and it includes a text label.

Extended FABs example

FloatingActionButton

The following examples shows an extended FAB.

"Extended FAB example for Flutter with white 'Extended' text and '+' icon over a black background."

Anatomy and key properties

Extended FAB anatomy diagram

An extended FAB has a text label, a transparent container and an optional icon.

  1. Container
  2. Icon
  3. Text label

Container attributes for extended FAB

 Property
ColorbackgroundColor
Stroke colorcolor of side on a custom shape
Stroke widthwidth of side on a custom shape
Shapeshape
Elevationelevation
Ripple colorsplashColor

Icon attributes for extended FAB

 Property
Iconicon
ColorforegroundColor
Sizesize on child when using an Icon

Text label attributes for extended FAB

 Property
Text labellabel
ColorforegroundColor
Typographystyle on label when using a Text

Theming FAB

FABs supports Material Theming and can be customized in terms of color, typography and shape.

FAB theming example

The following example shows regular, mini, and extended FABs with the Material Shrine Theme.

FABs with Shrine theming

No Flutter implementation guidance available

Using FABs

Installing

Because MDCFloatingButton is a subclass of MDCButton, the steps for installing it are the same.

In order to use MDCFloatingButton, first add the Buttons subspec to your Podfile:

Then, run the installer:

After that, import the relevant target or file and initialize an MDCFloatingButton.

Swift

Objective-C

Making FABs accessible

To help make your FABs usable to as many users as possible, apply the following:

  • Set an appropriate accessibilityLabel value if your button does not have a title or only has an icon:

Swift

Objective-C

Swift

Objective-C

Swift

Objective-C

Note There are some clear exceptions for these rules. Please adjust your buttons sizes accordingly.

  • Optional Set an appropriate accessibilityHint

Apple rarely recommends using the accessibilityHint because the label should already be clear enough to indicate what will happen. Before you consider setting an -accessibilityHint consider if you need it or if the rest of your UI could be adjusted to make it more contextually clear.

A well-crafted, thoughtful user interface can remove the need for accessibilityHint in most situations. Examples for a selection dialog to choose one or more days of the week for a repeating calendar event:

  • (Good) The dialog includes a header above the list of days reading, "Event repeats weekly on the following day(s)." The list items do not need accessibilityHint values.
  • (Bad) The dialog has no header above the list of days. Each list item (representing a day of the week) has the accessibilityHint value, "Toggles this day."

Types

There are three types of FABs: 1. Regular FABs 2. Mini FABs 3. Extended FABs

Three FABs, one of each type.

All three types of FABs are implemented by MDCFloatingButton, a subclass of MDCButton.

Regular FAB

Regular FAB example

Regular FABs are FABs that are not expanded and are a regular size.

Regular FAB example

To create a regular FAB use the +floatingButtonWithShape: constructor with a value of MDCFloatingButtonShapeDefault and make sure the mode property is set to MDCFloatingButtonModeNormal.

For more information on theming FABs see the Theming section.

Swift

Objective-C

Anatomy and key properties

Regular FAB anatomy diagram

A regular FAB has a container and an icon.

  1. Container
  2. Icon

Container attributes

 AttributeRelated method(s)Default value
ColorbackgroundColorsetBackgroundColor:forState:
backgroundColorForState
blue 500 from this Theming doc.
Stroke colorsetBorderColor:forState:
borderColorForState:
nil
Stroke widthsetBorderWidth:forState:
borderWidthForState:
0
Ripple colorinkColorsetInkColor
inkColor
White at 20% opacity

Icon attributes

 AttributeRelated method(s)Default value
IconimageViewsetImage:forState:
imageForState:
nil
ColorimageView.tintColorsetImageViewTintColor:forState:
imageViewTintColorForState:
nil

Mini FAB

Mini FAB example

A mini FAB should be used on smaller screens.

Mini FABs can also be used to create visual continuity with other screen elements.

Mini FAB example

To create a mini FAB use the +floatingButtonWithShape: constructor with a value of MDCFloatingButtonShapeMini and make sure the mode property is set to MDCFloatingButtonModeNormal.

For more information on theming FABs see the Theming section.

Swift

Objective-C

Anatomy and key properties

Mini FAB anatomy diagram

A mini FAB has a container and an icon.

  1. Container
  2. Icon

Container attributes

 AttributeRelated method(s)Default value
ColorbackgroundColorsetBackgroundColor:forState:
backgroundColorForState
blue 500 from this Theming doc.
Stroke colorsetBorderColor:forState:
borderColorForState:
nil
Stroke widthsetBorderWidth:forState:
borderWidthForState:
0
Ripple colorinkColorsetInkColor
inkColor
White at 20% opacity

Icon attributes

 AttributeRelated method(s)Default value
IconimageViewsetImage:forState:
imageForState:
nil
ColorimageView.tintColorsetImageViewTintColor:forState:
imageViewTintColorForState:
nil

Extended FAB

Extended FAB example

The extended FAB is wider, and it includes a text label.

Extended FAB example

To create an extended FAB use the +floatingButtonWithShape: constructor with a value of MDCFloatingButtonShapeDefault and make sure the mode property is set to MDCFloatingButtonModeExpanded.

For more information on theming FABs see the Theming section.

Swift

Objective-C

Anatomy and key properties

Extended FAB anatomy diagram

An extended FAB has a text label, a transparent container and an optional icon.

  1. Container
  2. Icon
  3. Text label

Container attributes

 AttributeRelated method(s)Default value
ColorbackgroundColorsetBackgroundColor:forState:
backgroundColorForState
blue 500 from this Theming doc.
Stroke colorsetBorderColor:forState:
borderColorForState:
nil
Stroke widthsetBorderWidth:forState:
borderWidthForState:
0
Ripple colorinkColorsetInkColor
inkColor
White at 20% opacity

Icon attributes

 AttributeRelated method(s)Default value
IconimageViewsetImage:forState:
imageForState:
nil
ColorimageView.tintColorsetImageViewTintColor:forState:
imageViewTintColorForState:
nil

Text label attributes

 AttributeRelated method(s)Default value
Text labeltitleLabelsetTitle:forState:
titleForState:
nil
ColortitleLabel.textColorsetTitleColor:forState:
titleColorForState:
UIColor.blackColor
TypographytitleLabel.fontsetFont: and font on titleLabelButton

Theming

You can theme an MDCFloatingButton to have a secondary theme using the MDCFloatingButton theming extension. Learn more about theming extensions and container schemes. Below is a screenshot of Material FABs with the Material Design Shrine theme:

Shrine FABs

To make use of the theming methods shown in the examples above install the Buttons theming extensions with Cocoapods. First, add the following line to your Podfile:

Then run the installer:

Next, import the Buttons theming target.

Swift

Objective-C

From there, pass a container scheme into the theming method on an MDCFloatingButton instance.

Swift

Objective-C

No iOS implementation guidance available

Up next