FAB - Material Design 3 Component Library

Basic Usage

Use a single FAB to highlight the most important action. The FAB floats above content to keep a single high-priority action consistently discoverable.

add

<ds-fab position="none">
  <ds-icon>add</ds-icon>
</ds-fab>

Initial Value

Use the label attribute to prefill extended FAB text.

edit

<ds-fab size="extended" label="Compose" position="none">
  <ds-icon>edit</ds-icon>
</ds-fab>

Variants and Formats

Choose size, color, and layout formats to match the surface.

Sizes

edit

Small

add

Default

chat

Large

add

Extended

<ds-fab size="small" position="none">
  <ds-icon>edit</ds-icon>
</ds-fab>

<ds-fab position="none">
  <ds-icon>add</ds-icon>
</ds-fab>

<ds-fab size="large" position="none">
  <ds-icon>chat</ds-icon>
</ds-fab>

<ds-fab size="extended" label="Create" position="none">
  <ds-icon>add</ds-icon>
</ds-fab>

Colors

add

Primary

edit

Secondary

favorite

Tertiary

share

Surface

<ds-fab color="primary" position="none">
  <ds-icon>add</ds-icon>
</ds-fab>

<ds-fab color="secondary" position="none">
  <ds-icon>edit</ds-icon>
</ds-fab>

<ds-fab color="tertiary" position="none">
  <ds-icon>favorite</ds-icon>
</ds-fab>

<ds-fab color="surface" position="none">
  <ds-icon>share</ds-icon>
</ds-fab>

Speed Dial

Click the FAB to reveal related actions. Click outside or select an action to close.

add

<ds-fab speed-dial id="fabSpeed" position="none">
  <ds-icon>add</ds-icon>
</ds-fab>

<script type="module">
  const fab = document.getElementById("fabSpeed");
  fab.addAction({ icon: "edit", label: "Edit" });
  fab.addAction({ icon: "share", label: "Share" });
</script>

Positioning

Fixed-position FAB with speed dial menu (bottom-right corner). Recommended approach: Use a fixed-positioned wrapper with position="none" to avoid rendering context issues.

add

<div style="position: fixed; inset-block-end: 16px; inset-inline-end: 16px; z-index: 1000;">
  <ds-fab speed-dial position="none">
    <ds-icon>add</ds-icon>
  </ds-fab>
</div>

<script type="module">
  const fab = document.querySelector("ds-fab[speed-dial]");
  fab.addAction({ icon: "edit", label: "Edit" });
  fab.addAction({ icon: "share", label: "Share" });
  fab.addAction({ icon: "archive", label: "Archive" });
</script>

States

Use disabled and lowered states for visual hierarchy.

Disabled

add

Lowered

add

Normal

add

Lowered

Interactive Example

Listen for click events and update UI feedback.

add

edit

Click a FAB to see output.

const fab = document.querySelector("ds-fab");

fab.addEventListener("ds-fab:click", (event) => {
  console.log(event.detail.size, event.detail.color);
});

API

Attributes

Attribute	Type	Default	Description
`size`	string	default	small, default, large, or extended.
`color`	string	primary	primary, secondary, tertiary, or surface.
`label`	string	-	Text label for extended FABs.
`position`	string	bottom-right	bottom-right, bottom-left, top-right, top-left, or none.
`lowered`	boolean	false	Reduces elevation when overlays are present.
`disabled`	boolean	false	Disables interaction.
`speed-dial`	boolean	false	Enables Speed Dial actions.

Properties

Property	Type	Description
`isOpen`	boolean	Read-only open state for Speed Dial mode.

Methods

Method	Description
`addAction(action)`	Add a Speed Dial action.
`clearActions()`	Remove all Speed Dial actions.
`open()`	Open the Speed Dial.
`close()`	Close the Speed Dial.
`toggle()`	Toggle Speed Dial state.

Events

Event	Detail	Description
`ds-fab:click`	`{ size, color }`	Fired when a standard FAB is clicked.
`ds-fab:open`	-	Fired when Speed Dial opens.
`ds-fab:close`	-	Fired when Speed Dial closes.
`ds-fab-action:click`	`{ action, index }`	Fired when a Speed Dial action is clicked.

CSS Parts

Part	Description
`none`	No CSS parts are exposed.

CSS Custom Properties

Property	Description
`--ds-fab-size-sm`	Small FAB size.
`--ds-fab-size-md`	Default FAB size.
`--ds-fab-size-lg`	Large FAB size.
`--ds-fab-icon-size-sm`	Icon size for small FABs.
`--ds-fab-icon-size-md`	Icon size for default/extended FABs.
`--ds-fab-icon-size-lg`	Icon size for large FABs.
`--ds-fab-extended-padding`	Horizontal padding for extended FABs.
`--ds-fab-extended-gap`	Gap between icon and label in extended FABs.
`--ds-fab-action-size`	Speed Dial action button size.
`--ds-fab-action-gap`	Spacing between Speed Dial actions.
`--ds-fab-action-offset`	Offset for Speed Dial action stack.
`--ds-fab-action-radius`	Corner radius for Speed Dial action buttons.

Accessibility

Keyboard Interaction

Key	Context	Expected Result
`Tab`	Page with FAB	Moves focus to the FAB
`Enter` / `Space`	Focus on FAB	Activates FAB action

Semantics

Provides aria-label from label or fallback text.
Disabled state blocks keyboard and pointer interaction.

Usage Guidelines

When to use: Use one FAB for the highest-priority screen action such as create, compose, or add.
When not to use: Avoid FABs for secondary actions, dense toolbars, or workflows with many competing priorities.
Composition: Prefer extended FABs when extra clarity is needed; switch to lowered state when overlays appear.
Common mistakes: Multiple FABs on one view dilute action hierarchy and obstruct content.