Fab

When to use

Use a FAB for the single most important, most frequent action on a screen, such as composing a new message or adding an item, not for a list of equally-weighted actions. A page should have at most one. See Alternatives below for several related actions instead of just one.

Install & usage

Pick a framework in the toolbar above and these snippets adapt.

npm install @eunomia/elements

import "@eunomia/elements/fab.js";
import "@eunomia/elements/icon.js";

<eun-fab icon="add" aria-label="Create"></eun-fab>

npm install @eunomia/elements

<script type="module">
  import "@eunomia/elements/fab.js";
  import "@eunomia/elements/icon.js";
</script>

<eun-fab icon="add" aria-label="Create"></eun-fab>

npm install @eunomia/elements

import "@eunomia/elements/fab.js";
import "@eunomia/elements/icon.js";

function CreateFab() {
  return (
    <eun-fab
      icon="add"
      aria-label="Create"
      onclick={() => console.log("create")}
    />
  );
}

npm install @eunomia/elements

"use client";
import "@eunomia/elements/fab.js";
import "@eunomia/elements/icon.js";

export function CreateFab() {
  return (
    <eun-fab
      icon="add"
      aria-label="Create"
      onclick={() => console.log("create")}
    />
  );
}

npm install @eunomia/elements

<script setup>
  import "@eunomia/elements/fab.js";
  import "@eunomia/elements/icon.js";
</script>

<template>
  <eun-fab
    icon="add"
    aria-label="Create"
    @click="() => console.log('create')"
  />
</template>

npm install @eunomia/elements

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "@eunomia/elements/fab.js";
import "@eunomia/elements/icon.js";

@Component({
  selector: "app-create-fab",
  template: `<eun-fab
    icon="add"
    aria-label="Create"
    (click)="onCreate()"
  ></eun-fab>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class CreateFabComponent {
  onCreate() {
    console.log("create");
  }
}

Alternatives

Guidance

Live testing

Properties

Variants

Colors

Same colors as eun-button: primary (default), secondary, critical, success, warning. The neutral light, medium and dark colors, and the fixed-color attribute that keeps light and dark white and black in every theme, work exactly as they do on the button.

<eun-fab icon="add" aria-label="Create"></eun-fab>
<eun-fab icon="add" color="secondary" aria-label="Create"></eun-fab>
<eun-fab icon="delete" color="critical" aria-label="Delete"></eun-fab>
<eun-fab icon="favorite" color="success" aria-label="Save"></eun-fab>
<eun-fab icon="warning" color="warning" aria-label="Warn"></eun-fab>

Part of the shared vocabulary, alongside every other component that reuses it.

Sizes

Five sizes are available, matching eun-button's own scale: xs, s, m (default), l, xl.

<eun-fab icon="add" size="xs" aria-label="Create"></eun-fab>
<eun-fab icon="add" size="s" aria-label="Create"></eun-fab>
<eun-fab icon="add" aria-label="Create"></eun-fab>
<eun-fab icon="add" size="l" aria-label="Create"></eun-fab>
<eun-fab icon="add" size="xl" aria-label="Create"></eun-fab>

Extended

Set label to make the FAB extendable: it stays a plain circle until hovered/focused, then slides open to reveal the label, the same slide behavior eun-button exposes directly, driven here automatically by whether label is set. Hover or focus the button below to see it expand.

<eun-fab icon="add" label="Create"></eun-fab>

Without label, the FAB is always icon-only: set aria-label in that case, since an icon alone has no accessible name.

Custom icon

Need something other than a eun-icon, or a different icon library entirely? Slot your own content into icon instead. It replaces the prop-driven icon entirely.

<eun-fab aria-label="Create">
  <svg
    slot="icon"
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
  >
    <path d="M12 5v14M5 12h14"></path>
  </svg>
</eun-fab>

States

Disabled

<eun-fab icon="add" disabled aria-label="Create"></eun-fab>

Loading

Setting loading blocks interaction like disabled, but keeps the icon/label in place (invisible, so the button's size doesn't change) with a eun-loader layered on top.

<eun-fab icon="add" loading aria-label="Create"></eun-fab>

import "@eunomia/elements/loader.js";

Fixed positioning

Set position (bottom-right, bottom-left, top-right, top-left) to dock the FAB to a corner of the viewport, with no extra CSS needed.

<eun-fab icon="add" position="bottom-right" aria-label="Create"></eun-fab>

Distance from the edge defaults to --eun-space-l (24px) and is customizable through --fab-offset, while the stacking order defaults to 40 and is customizable through --fab-z-index.

Leave position unset to place the FAB yourself: it then behaves like a normal inline element wherever you put it in the page flow (e.g. inside a toolbar, as in every other demo on this page).

Links

Setting href renders the FAB as a native <a> internally instead of a <button>, exactly like eun-button.

<eun-fab
  icon="open_in_new"
  label="Documentation"
  href="https://example.com"
></eun-fab>

Opening in a new tab

Setting target="_blank" automatically adds rel="noopener noreferrer" and appends "(opens in a new tab)" to the accessible name, exactly like eun-button. When label is also set, a small external-link icon is appended to it too. An icon-only FAB (no label) only gets the accessible-name change, since there's no natural spot for a second icon inside its small circular footprint without crowding the primary one.

<eun-fab
  icon="open_in_new"
  label="Documentation"
  href="https://example.com"
  target="_blank"
  aria-label="Documentation"
></eun-fab>

SPA navigation

A link FAB dispatches the same cancelable eunnavigate event as eun-button right before following href, letting an SPA router intercept it for client-side routing instead of a full page load. It's never dispatched for download links, since a file download isn't a navigation. See the SPA navigation guide for a ready-to-use router bridge per framework.

Integration

Invoker Commands API

Setting command and commandfor turns the FAB into an invoker: no click handler needed, the target picks up the command itself. Prefer this over wiring a click handler yourself, and over the Popover API's own popovertarget, which only ever covers popover-attributed targets. Modal and Drawer both understand show-modal, close, and request-close out of the box.

<eun-modal
  closeable
  close-on-backdrop
  id="compose-modal"
  heading="Compose message"
>
  <p>Write a new message.</p>
</eun-modal>
<eun-fab
  icon="edit"
  aria-label="Compose"
  command="show-modal"
  commandfor="compose-modal"
></eun-fab>

See the Invoker Commands API guide for custom commands and current browser support.

Server-side rendering

The fab's circle lives in its shadow root, so a server-rendered fab has no surface, and a positioned one sits in the page flow, until the element upgrades. Link button-ssr.css in the page's <head> to draw the circle and pin it to its corner from the first paint:

<link
  rel="stylesheet"
  href="node_modules/@eunomia/elements/dist/ssr/button-ssr.css"
/>

It covers every size and color, disabled, position and the --fab-* custom properties. The icon set by icon appears with the upgrade.

Custom colors

The custom properties that change colors, borders, shadows and corners, at a glance. The API tab lists every property of the component.

Keyboard and focus

Keyboard interactions

Fixed positioning doesn't trap focus or content

position only ever changes CSS (position: fixed plus an offset). It adds no ARIA role, no focus trap, and doesn't remove any other page content from the accessibility tree. A positioned FAB sits in the same tab order position its DOM placement already gives it, so place it thoughtfully in markup (typically near the end of the document) so Tab doesn't jump to it unexpectedly in the middle of an unrelated flow.

Semantics and screen readers

Accessible name

An icon alone has no accessible name: set aria-label whenever label isn't set, and consider it even when label is set if the label text alone isn't a sufficient description of the action. Refer to eun-button's own Accessibility tab for the full reasoning behind this convention, shared identically here.

For a link FAB opening a new tab (href + target="_blank"), "(opens in a new tab)" is announced automatically, appended directly to aria-label when one is set, or as a visually-hidden addition to the accessible name otherwise, so no manual wording is needed either way.

Disabled and loading state

A disabled FAB carries the native disabled attribute (button mode) or aria-disabled="true" with href omitted (link mode). Either way, it's removed from the tab order and emits no events, exactly like eun-button's own disabled state.

While loading, aria-busy="true" is set on the rendered <button>/<a>, the FAB is removed from the tab order, and the loading indicator exposes role="status" (via eun-loader's own aria-label) plus a redundant visually-hidden aria-live="polite" announcement, so assistive technology reliably picks up the state change even if it missed the initial aria-busy update.

Reference links

HTML Specification: Button element
WAI-ARIA Authoring Practices: Button Pattern