Skip to content
omaris

Actions

FAB

MD3 floating action button. Three sizes (40 / 56 / 96dp), plus extended for the pill that carries a label next to the icon.

import { Fab } from 'omaris'
Learn

Examples

Sizes

56dp is the screen's one action; 40dp fits inside a dense surface like a card, 96dp a screen that is nothing but that action.

<script lang="ts">	import { Fab } from 'omaris';</script>​{#snippet plus()}	...{/snippet}​<Fab size="sm" aria-label="New invoice">{@render plus()}</Fab><Fab size="md" aria-label="New invoice">{@render plus()}</Fab><Fab size="lg" aria-label="New invoice">{@render plus()}</Fab>

Extended

extended adds the label, for an action a plus alone would not explain — "New invoice" rather than +.

<script lang="ts">	import { Fab } from 'omaris';</script>​{#snippet plus()}	...{/snippet}​<Fab extended>	{@render plus()}	{#snippet label()}New invoice{/snippet}</Fab><Fab extended variant="filled" tone="tertiary">	{@render plus()}	{#snippet label()}Compose{/snippet}</Fab><Fab extended variant="surface" size="sm">	{@render plus()}	{#snippet label()}Add row{/snippet}</Fab>

When to use it

Use it for

  • The single most common action on a screen: Compose, New order, Add. One per screen, and only when the screen has an action like that.
  • A phone layout, pinned bottom-end above scrolling content, where a Button would scroll away with the list.
  • extended when the icon alone is ambiguous. "New invoice" reads; a plus does not. Drop back to the icon on scroll when space is tight.
  • size="lg" (96dp) for a screen that is nothing but that one action: a camera shutter, "Start scan".

Not for

  • The primary action of a form or dialog → a filled Button in its footer.
  • The second and third action on the same screen → Icon Buttons in the Top App Bar, or a Menu.
  • An icon-only action in a toolbar → Icon Button. A FAB has elevation and a 56dp target; a row of them would fight.
  • Deleting. A FAB creates. Put removal in a tone="destructive" button and confirm it in a Dialog.
  • A desktop dashboard whose action lives in the header. A FAB over a table is a phone pattern out of place. Use it where content scrolls under it.

Do

  • Keep the default tonal. Use filled only when nothing else on the screen is primary and the FAB must dominate.
  • Give an icon-only FAB an aria-label.
  • Position it yourself, fixed bottom-4 end-4, clear of a Navigation Bar. The component draws the button, not the placement.

Don't

  • Put two FABs on one screen. The second demotes both.
  • Use size="sm" (40dp) as the screen's action. It is for a FAB inside a dense surface like a card or a split-screen panel.
  • Flatten the elevation with a class. A flat FAB is an Icon Button.
  • Attach confetti to a routine action. It is for a moment worth marking: the first order, a milestone.
Pairs with Button Icon Button Navigation Bar Top App Bar Sheet

Quick reference

tone
  • primary (default)
  • secondary
  • tertiary
  • destructive
  • success
  • warning
  • info
variant
  • tonal (default)
  • filled
  • surface
size
  • sm
  • md (default)
  • lg

API

Fab

MD3 floating action button. Three sizes (40 / 56 / 96dp), plus extended for the pill that carries a label next to the icon.

A FAB sits above the content, so it keeps a resting elevation and only lifts further on hover — it never drops to flat.

import { Fab } from 'omaris'

Props

variant

Defaults to 'tonal'

FabVariant
tonal
MD3's default: the tone's container color.
filled
Higher-emphasis FAB, for the one action on the screen.
surface
Neutral FAB that lets the icon carry the color.
tone

Defaults to 'primary'

FabTone
primary
secondary
tertiary
destructive
success
warning
info
size

Defaults to 'md'

FabSize

40 / 56 / 96dp.

sm
md
lg
extended

Defaults to false

boolean

Show the label beside the icon instead of an icon-only circle.

ripple

Defaults to true

boolean
confetti

Defaults to false

boolean | ConfettiOptions

Confetti on press. true for the default burst, or any ConfettiOptions — confetti={{ preset: 'fireworks' }}.

class
string
children
Snippet

The icon. Always rendered.

label
Snippet

The label, shown only when extended.

shape
ButtonShape

Pill (round) or MD3 rounded rectangle (square).

icon
boolean

Square, label-less button. Requires an aria-label.

loading
boolean

Grows a spinner in at the start of the button and blocks interaction. The label stays put; only an icon button swaps its icon out.

toggle
boolean

Turns the button into a two-state toggle driven by pressed. Ignored when href is set — a link has no pressed state.

pressed bindable
boolean

Selected state of a toggle button. Bindable.