• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Floating Action Button

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/floatingactionbutton@1.0.6
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

  • Floating action button is used to give users a more prominent button for high frequency actions
  • When using Floating Action Button in dark themes, the background-layer-color-2 will often show up on the base color gray-50 or gray-75 or on content, images, etc.

Variants

Primary
Verified

Show markup
<button class="spectrum-FloatingActionButton spectrum-FloatingActionButton--primary" aria-label="Add">
  <svg class="spectrum-Icon spectrum-FloatingActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-AddCircle" />
  </svg>
</button>

Primary (focused)
Verified

Show markup
<button class="spectrum-FloatingActionButton spectrum-FloatingActionButton--primary is-focused" aria-label="Add">
  <svg class="spectrum-Icon spectrum-FloatingActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-AddCircle" />
  </svg>
</button>

Secondary
Verified

Show markup
<button class="spectrum-FloatingActionButton spectrum-FloatingActionButton--secondary" aria-label="Add">
  <svg class="spectrum-Icon spectrum-FloatingActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-AddCircle" />
  </svg>
</button>

Secondary (focused)
Verified

Show markup
<button class="spectrum-FloatingActionButton spectrum-FloatingActionButton--secondary is-focused" aria-label="Add">
  <svg class="spectrum-Icon spectrum-FloatingActionButton-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-icon-18-AddCircle" />
  </svg>
</button>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.