Floating Action Button

Floating action buttons represent the single most important action on a page, positioned above other content to draw attention to it.

Create

Overview

A floating action button (FAB) is a prominent, circular button that performs the primary or most common action on a screen. Primarily designed for mobile interfaces, it appears in front of all screen content and provides immediate access to the most important user action within the current context.

FABs are characterized by their elevated appearance, circular shape with centered icons, and persistent positioning that remains visible as users scroll through content.

Usage

forge-fab represents a page’s single most important action through theme, density, and elevation. Use the default slot alone for an icon-only FAB, or add the label slot for an extended FAB with a text label. Reserve it for pages that truly have one primary action; when several actions are equally likely, reach for a button instead.

Rules

Use a FAB only when a page has one clear primary action.

Use when the primary action is constructive (creating, adding, or starting something new).

Mobile interfaces benefit from prominent, easily accessible action buttons.

Use when the action is relevant across most or all content on the screen.

Place the icon before the label in an extended FAB.

Use where users frequently perform the same action throughout their workflow.

Reserve elevation="lowered" for a FAB that already sits on a raised surface, like a card.

Don't

Don't display more than one FAB on a page.

Don't use a FAB for a minor or destructive action, like archiving or showing an error.

Don't position a FAB where it obscures important content or controls.

Don't use when multiple primary actions are equally likely - for example, if adding and editing records are equally probable, use regular buttons instead.

Positioning

forge-fab doesn’t position itself — fix it to a corner of the viewport (or a scroll container) yourself, typically with position: fixed and a spacing token for the offset:

.bottom-right {
  position: fixed;
  bottom: var(--forge-spacing-medium);
  right: var(--forge-spacing-medium);
}

Density

Set density to small, medium (the default), or large to match the FAB’s surrounding context.

Small, medium (default), and large density.

<forge-fab density="small" aria-label="Favorite">
  <forge-icon name="favorite">
  </forge-icon>
</forge-fab>
<forge-fab density="medium" aria-label="Favorite">
  <forge-icon name="favorite">
  </forge-icon>
</forge-fab>
<forge-fab density="large" aria-label="Favorite">
  <forge-icon name="favorite">
  </forge-icon>
</forge-fab>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconFavorite } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconFavorite]);
</script>

Extended

Add a label slot for an extended FAB with a text label — use it for actions that don’t have a familiar icon.

An icon paired with a label slot switches the FAB into its extended form.

<forge-fab>
  <forge-icon name="add">
  </forge-icon>
  <span slot="label">
    Create
  </span>
</forge-fab>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconAdd } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconAdd]);
</script>

As a link

Wrap an <a> in the default slot to get a navigating FAB instead of one that fires a click action.

A FAB wrapping an anchor for navigation.

<forge-fab>
  <a href="javascript: void(0);" aria-label="FAB with anchor">
    <forge-icon name="open_in_new">
    </forge-icon>
  </a>
</forge-fab>

<script type="module">
import { IconRegistry } from "@tylertech/forge/icon";
import { tylIconOpenInNew } from "@tylertech/tyler-icons";
IconRegistry.define([tylIconOpenInNew]);
</script>

Floating action buttons are used to represent the most important action on a page. They are typically used in mobile applications, and are positioned above other content in a way that draws attention to them.

import "@tylertech/forge/floating-action-button";

Properties

Property	Attribute	Type	Default	Description
`theme`	`theme`	`ButtonTheme`	`'secondary'`	Gets/sets the theme of the button.
`density`	`density`	`FloatingActionButtonDensity`	`'medium'`	Gets/sets the density of the button.
`elevation`	`elevation`	`FloatingActionButtonElevation`	`'raised'`	Gets/sets the elevation of the button.
`type`	`type`	`ButtonType`	`'button'`	Gets/sets the type of button.
`disabled`	`disabled`	`boolean`	`false`	Gets/sets whether the button is disabled.
`dense`	`dense`	`boolean`	`false`	Gets/sets whether the button is dense.
`popoverIcon`	`popover-icon`	`boolean`	`false`	Gets/sets whether to show a popover icon.
`name`	`name`	`string`	`''`	Gets/sets the button name for form association.
`value`	`value`	`string`	`''`	Gets/sets the button value for form submission.
`command`	`command`	`CommandType`	`''`	Indicates to the targeted element which action to take.
`commandFor`	`command-for`	`string`	`''`	Targets another element to be invoked.
`commandForElement`	—	`HTMLElement \| undefined`	`undefined`	Targets another element to be invoked.

Events

Name	Type	Description
`click`	`PointerEvent`	Fires when the button is clicked.

Slots

Name	Description
`(default)`	This is a default/unnamed slot. Typically used for icon-only or label-only FABs. If the content forces the width to be large than the height, then the FAB will be in extended mode.
`start`	An element to logically render at the start of the button content.
`label`	Reserved specifically for label text. This forces the button into extended mode.
`end`	An element to logically render at the end of the button content.

CSS Parts

Name	Description
`::part(root)`	The root container element.
`::part(focus-indicator)`	The focus-indicator indicator element.
`::part(state-layer)`	The state-layer surface element.

CSS Custom Properties

Name	Description
`--forge-fab-background-display`	The display property.
`--forge-fab-gap`	The gap between the icon and the label.
`--forge-fab-background`	The background color.
`--forge-fab-color`	The text color.
`--forge-fab-size`	The height and min-width of the button.
`--forge-fab-padding`	The inline padding of the button.
`--forge-fab-shadow`	The box shadow of the button.
`--forge-fab-hover-shadow`	The box shadow of the button when hovered.
`--forge-fab-active-shadow`	The box shadow of the button when active.
`--forge-fab-lowered-shadow`	The box shadow of the button when lowered.
`--forge-fab-lowered-hover-shadow`	The box shadow of the button when lowered and hovered.
`--forge-fab-lowered-active-shadow`	The box shadow of the button when lowered and active.
`--forge-fab-transition-duration`	The transition duration.
`--forge-fab-transition-timing`	The transition timing function.
`--forge-fab-shape`	The border radius of the button.
`--forge-fab-shape-start-start`	The start-start border radius.
`--forge-fab-shape-start-end`	The start-end border radius.
`--forge-fab-shape-end-start`	The end-start border radius.
`--forge-fab-shape-end-end`	The end-end border radius.
`--forge-fab-extended-padding`	The inline padding of the extended button.
`--forge-fab-extended-min-width`	The min-width of the extended button.
`--forge-fab-density-small-size`	The height and min-width of the small density button.
`--forge-fab-density-medium-size`	The height and min-width of the medium density (default) button.
`--forge-fab-density-large-size`	The height and min-width of the large density button.
`--forge-fab-disabled-cursor`	The cursor when disabled.
`--forge-fab-disabled-background`	The background color when disabled.
`--forge-fab-disabled-color`	The text color when disabled.
`--forge-fab-disabled-opacity`	The opacity when disabled.

Methods

Name	Returns	Description
`click()`	`void`
`focus(options)`	`void`

Labeling

A FAB that only contains an icon needs a meaningful accessible name via aria-label or aria-labelledby — the icon alone doesn’t convey its purpose to assistive technology.

Avoid capitalized label text; screen readers read capitalized words character-by-character. Use text-transform: uppercase instead so the visual style doesn’t affect what gets announced.

Keyboard and contrast

Make sure the FAB can be reached by keyboard navigation, with a distinct visual cue when it’s focused.
Verify sufficient contrast between the FAB’s foreground and background to meet WCAG requirements — including against whatever page content it floats above.