Floating action button

One round-cornered button fixed in the bottom-right corner, for the one action people take most: here, posting a photo.

CSS: css/components/fab.css
JS: opens a sheet with js/components/sheet.js

01 — Examples

Icon and extended

Shown here in place. In a page it’s fixed to the corner, clear of the iPhone home indicator. The real one on this page opens a sheet.

In a page

Put .has-fab on <body> so the button never covers the last thing on the page. data-sheet-open names the sheet it opens.

HTML

<body class="has-fab">
  …
  <button class="fab" type="button" aria-label="New post" data-sheet-open="post-sheet">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
  </button>
</body>

02 — Usage

Use it for

The single most common action on a screen: post, compose, add.
Pages people scroll, where a header button would scroll away.

Avoid

More than one floating button.
Secondary or destructive actions.
Pages that already show the same action in view.

03 — Accessibility

Notes

The icon-only button needs an aria-label that names the action.
It comes last in the page, so keyboard users reach it after the content. Repeat the action in the content if it matters.
It dips slightly when pressed (--state-pressed-scale).