- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Floating action button
Component status | Contribution |
---|---|
Last released | December 4, 2023 |
Current version | @spectrum-css/floatingactionbutton@1.0.36 |
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 colorgray-50
orgray-75
or on content, images, etc.
Variants
PrimaryVerified
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>
SecondaryVerified
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>
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.