The m3e-fab is a floating action button (FAB) used to present important actions.

npm i @m3e/fab

This section outlines usage examples and configuration guidance for the components in this package.

There are seven FAB appearance variants: primary, primary-container (default), secondary, and secondary-container, tertiary, tertiary-container, and surface. Use the variant attribute to change the appearance.

<m3e-fab variant="primary">
  <m3e-icon name="add"></m3e-icon>
</m3e-fab>
<!-- Additional variants omitted for brevity -->

Use the lowered attribute to lower the elevation of a FAB to reduce emphasis. Lowering is supported for all appearance variants.

<m3e-fab lowered variant="primary">
  <m3e-icon name="add"></m3e-icon>
</m3e-fab>
<!-- Additional variants omitted for brevity -->

There are three size variants which can be used to add or remove emphasis: small, medium (default), and large. Use the size attribute to control a FAB's size.

<m3e-fab size="small">
  <m3e-icon name="add"></m3e-icon>
</m3e-fab>
<!-- Additional variants omitted for brevity -->

Use the disabled attribute to disable a FAB. By default, disabled FABs are not focusable with the keyboard. You can use the disabled-interactive attribute to support focusability of disabled controls to increase their discoverability.

<m3e-fab disabled>
  <m3e-icon name="add"></m3e-icon>
</m3e-fab>
<m3e-fab disabled-interactive>
  <m3e-icon name="add"></m3e-icon>
</m3e-fab>

Use the extended attribute and label slot to create an extended FAB.

<m3e-fab extended size="small">
  <m3e-icon name="add"></m3e-icon>
  <span slot="label">Extended</span>
</m3e-fab>
<!-- Additional sizes omitted for brevity -->

Use the type attribute to control the behavior of a FAB. By default, type is button. You can change this to submit or reset to submit or reset a parenting form when clicked. When submitting a form, you can use the name and value attributes to specify a value.

FABs can also behave like links by specifying a URL using the href attribute. You can also specify target, rel and download similar to native anchor tags.

<m3e-fab extended href="https://www.google.com" target="_blank">
  <m3e-icon name="open_in_new_window"></m3e-icon>
  <span slot="label">Google</span>
</m3e-fab>

By default, FABs are given the ARIA role button, indicating they are clickable elements that trigger actions.

Unless extended, always provide an accessible label via aria-label or aria-labelledby for each FAB.

Slots have aria-hidden="true" to ensure icons are always hidden from assistive technologies.

When disabling using either the disabled or disabled-interactive attribute, aria-disabled="true" is used to convey to assistive technologies that the FAB is disabled. If disabled using disabled-interactive, tabindex is retained to convey that the FAB continues to be interactive.

When href is specified, the ARIA role link is used instead of button to convey the FAB provides an interactive reference to a resource. In addition, the component presents an internal anchor, hidden from assistive technologies, used to invoke native browser features such a context menu options and tooltips.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/fab/dist/index.js"></script>

In addition, you must use an import map to include dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>

For production, use index.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.