Quaff

Floating action buttons

Floating action buttons highlight a screen's primary action. Use an icon, a visible label, or a menu for related actions.

Little notes Just for you
Make room for a slow weekend

Small plans, good days.

info QFab API Source
interface QFabProps extends Omit<HTMLButtonAttributes & Record<"aria-label", string>, "children" | "color" | "disabled">
color
?: QFabColor = "primary-container"
Color role for the container and its matching content. Surface is a legacy color style.
expressive
?: boolean = undefined
Uses Material 3 Expressive sizing. Inherits the Quaff.init() setting when omitted.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
: QBtnIcon = undefined
Icon for the primary action. Supply an aria-label to name the action.
noRipple
?: boolean = false
Disables the ripple effect on click.
replace
?: boolean = false
Replaces the current entry in the browser's history rather than adding a new one. This is the same as setting the `data-sveltekit-replacestate` attribute to "true".
rippleColor
?: string = undefined
Sets the ripple effect's color for the component. If omitted, the ripple will inherit the component's text color.
size
?: QFabSize = undefined
Size of the FAB. Baseline sizes are 40, 56, and 96px; expressive sizes are 56, 80, and 96px. Defaults to 56px (md for baseline, sm for expressive). Extended FABs use these as minimum heights; the baseline minimum is always 56px.
target
?: HTMLAnchorAttributes["target"] = undefined
For navigational components only, sets or retrieves the window or frame at which to target content.
to
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to. As it is the same as href, it is recommended to use href instead.
info QExtendedFab API Source
interface QExtendedFabProps extends Omit<HTMLButtonAttributes, "children" | "color" | "disabled">
collapsed
?: boolean = false
Collapses to an icon-only FAB while preserving the accessible name. Ignored without an icon.
color
?: QFabColor = "primary-container"
Color role for the container and its matching content. Surface is a legacy color style.
expressive
?: boolean = undefined
Uses Material 3 Expressive sizing. Inherits the Quaff.init() setting when omitted.
href
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to.
icon
?: QBtnIcon = undefined
Optional icon for the primary action.
label
: string = undefined
Short, visible text naming the primary action.
noRipple
?: boolean = false
Disables the ripple effect on click.
replace
?: boolean = false
Replaces the current entry in the browser's history rather than adding a new one. This is the same as setting the `data-sveltekit-replacestate` attribute to "true".
rippleColor
?: string = undefined
Sets the ripple effect's color for the component. If omitted, the ripple will inherit the component's text color.
size
?: QFabSize = undefined
Size of the FAB. Baseline sizes are 40, 56, and 96px; expressive sizes are 56, 80, and 96px. Defaults to 56px (md for baseline, sm for expressive). Extended FABs use these as minimum heights; the baseline minimum is always 56px.
target
?: HTMLAnchorAttributes["target"] = undefined
For navigational components only, sets or retrieves the window or frame at which to target content.
to
?: string = undefined
Makes the component navigational, typically used for links to set the URL or route it should navigate to. As it is the same as href, it is recommended to use href instead.
info QFabMenu API Source
interface QFabMenuProps extends Omit<Omit<HTMLButtonAttributes & Record<"aria-label", string>, "children" | "color" | "disabled">, "aria-label" | "onclick" | "href" | "to" | "replace" | "target" | "type" | "form" | "formaction" | "formenctype" | "formmethod" | "formnovalidate" | "formtarget" | "name" | "value">
color
?: QFabColor = "primary-container"
Color role for the container and its matching content. Surface is a legacy color style.
expanded
?: boolean = $bindable(false)
Whether the menu is open. This property is bindable.
expressive
?: boolean = undefined
Uses Material 3 Expressive sizing. Inherits the Quaff.init() setting when omitted.
icon
: QBtnIcon = undefined
Icon for the primary action. Supply an aria-label to name the action.
menuLabel
: string = undefined
Accessible name for the menu trigger, such as "Create content".
noRipple
?: boolean = false
Disables the ripple effect on click.
rippleColor
?: string = undefined
Sets the ripple effect's color for the component. If omitted, the ripple will inherit the component's text color.
size
?: QFabSize = undefined
Size of the FAB. Baseline sizes are 40, 56, and 96px; expressive sizes are 56, 80, and 96px. Defaults to 56px (md for baseline, sm for expressive). Extended FABs use these as minimum heights; the baseline minimum is always 56px.

Usage

Baseline and Expressive FABs

Give QFab an icon and an action-oriented aria-label. The label also appears as a tooltip on hover and focus. expressive inherits the global Quaff setting unless specified.

Baseline sizes are 40, 56, and 96px; expressive sizes are 56, 80, and 96px. Both modes default to 56px. The 80px expressive FAB suits most layouts; the 40px baseline size remains available for compatibility.

Baseline
sm · 40px
md · 56px
lg · 96px
Expressive
sm · 56px
md · 80px
lg · 96px

Choose a size

Colors
Container colors work in both modes; primary-container is the default. Expressive adds the primary, secondary, and tertiary tone colors. surface is a legacy baseline style.
primary-container
secondary-container
tertiary-container
primary
secondary
tertiary
surface

Choose a color example

Extended FAB

QExtendedFab requires a short label; its icon is optional. Baseline extended FABs have a minimum height of 56px. Expressive minimums are 56, 80, and 96px. The label determines their width, and larger text can increase their height.

Set collapsed to show only the icon while keeping the accessible name. Without an icon, the label stays visible. Your application controls when to collapse, such as in response to scrolling or limited space.

Collapse to icon
Expressive
sm · 56px
md · 80px
lg · 96px
Baseline

Ready to compose

FAB Menu

Use QFabMenu for two to six related actions. Supply a contextual menuLabel and labeled menu items. Bind expanded to observe or control the open state. This example uses an expressive FAB. Material 3 specifies a baseline menu popup on the web.

Opening focuses the first item. Arrow keys navigate; Space or Enter activates an action. Escape or an outside click dismisses the menu, and choosing an action closes it.

Weekend workspace Your next idea
A little escape Trip notes · Today
By the water Sketch · Yesterday

Open the FAB menu to create something.

Stationary Placement
Keep the primary FAB in place while content scrolls. This notebook places it 16px from the bottom and trailing edges. Scroll the notes, then use the FAB to write your own.
Little notes Keep a good thought
  • A weekend by the river

    A picnic, a good book, nowhere to rush.

  • The little things

    Fresh coffee. Open windows. A new playlist.

  • Something to make

    A postcard for someone far away.

  • Sunday, slowly

    Pick up flowers on the way home.

A little space for your ideas.

Accessibility

Hide unavailable actions instead of disabling a FAB. Use a clear icon and an accessible name describing the action. Tab focuses the button; Space or Enter activates it. Keep nearby controls and their focus indicators visible when positioning a FAB.

See the Material 3 specifications for FABs, extended FABs, and FAB menus, plus the accessibility guidance.

Privacy Policy