FAB — Ogonëk M3 Docs

Floating action buttons (FABs) help people take the primary action on a screen. FAB comes in small, regular, and large sizes, an extended form with a label, and an optional expanding menu of related actions.

M3 Spec

open_in_new

Overview

The FAB component implements the Material Design 3 Floating Action Button pattern.

Set withMenu to turn the FAB into a trigger for a radial menu of FABMenuItem actions — clicking the FAB swaps its icon for a close icon and opens FABMenu, positioned above it and closed automatically on an outside click. Use this pattern instead of a single FAB when there are 2–5 related primary actions to choose from.

Import

import { FAB, FABMenuItem } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Config, size, expanded, and label Controls.

widgets

With Menu

A FAB that expands into a menu of related actions.

Basic Usage

A regular primary FAB, and an extended variant with a label:

<script lang="ts">
  import { FAB } from '@noxlovette/material';
</script>

<FAB config="primary" iconProps={{ name: 'edit' }} />

<FAB config="primary" expanded label="Compose" iconProps={{ name: 'edit' }} />

FAB Props

Prop	Type	Default	Description
`iconProps` required	`IconProps`	`—`	Configuration for the FAB icon.
`config`	`"primary" \| "secondary" \| "tertiary"`	`"primary"`	The color role of the FAB.
`size`	`"small" \| "regular" \| "large"`	`"regular"`	Overall size of the FAB.
`expanded`	`boolean`	`false`	Shows the extended FAB with a text label alongside the icon.
`label`	`string`	`—`	Text label shown when expanded is true.
`withMenu`	`boolean`	`false`	Toggles a FABMenu of FABMenuItem children when the FAB is clicked, and swaps the icon for a close icon while open.
`children`	`Snippet`	`—`	FABMenuItem elements, rendered when withMenu is true.
`disabled`	`boolean`	`false`	Disables the FAB.
`loading`	`boolean`	`false`	Shows a LoadingIndicator in place of the icon.
`href`	`string`	`—`	Renders the FAB as an <a> instead of a <button>.
`formaction`	`string`	`—`	The formaction attribute, for use as a form submit action.

Accessibility

label

Icon-only labeling

A non-expanded FAB has no visible text — give iconProps a symbol whose meaning is unambiguous, or prefer expanded with a label for less common actions.

menu_open

Menu dismissal

withMenu's FABMenu closes on outside click via the clickOutside action, and its icon flips to a close affordance while open.

block

Disabled state

disabled removes the FAB from the tab order and exposes the disabled attribute to assistive tech.