@rmwc/fab

Fabs

A floating action button (FAB) represents the primary action of a screen.

• Module @rmwc/fab
• Import styles:
  • Using CSS Loader
    • import '@rmwc/fab/styles';
  • Or include stylesheets
    • '@material/fab/dist/mdc.fab.css'
    • '@rmwc/icon/icon.css'
    • '@material/ripple/dist/mdc.ripple.css'
• MDC Docs: https://material.io/develop/web/components/buttons/floating-action-buttons/

<Fab icon="favorite" />

<Fab icon="favorite" mini />

<>
  <Fab icon="add" label="Create" />
  <Fab trailingIcon="add" label="Create" />
  <Fab label="Label only" />
</>

<>
  <Fab icon="favorite_outline" theme={['primaryBg', 'onPrimary']} />
  <Fab
    icon="delete"
    style={{ backgroundColor: 'var(--mdc-theme-error)' }}
    theme={['onError']}
  />
</>

Fab

A floating action button component

Props

Name	Type	Description
children	React.ReactNode	Content specified as children.
exited	undefined | false | true	Animates the FAB out of view. When this class is removed, the FAB will return to view.
icon	RMWC.IconPropT	The icon for the FAB
label	React.ReactNode & any	Make the Fab extended with a label.
mini	undefined | false | true	Make the Fab smaller.
trailingIcon	RMWC.IconPropT	A trialing icon for the FAB

Changelog

8.0.7 (2023-03-20)

Build System / Dependencies

• deps:
  • bump trim-newlines and meow (bc4e918f)
  • bump markdown-it and kss (ac855d99)
  • bump webpack from 5.70.0 to 5.76.1 (23653f4e)
  • bump http-cache-semantics and lerna (e2cded73)
  • bump loader-utils from 1.4.0 to 1.4.2 (#835) (04db5896)
  • bump decode-uri-component from 0.2.0 to 0.2.2 (#837) (ffe7ad54)
  • bump json5 from 1.0.1 to 1.0.2 (#845) (b6fc93b3)
  • bump minimatch and recursive-readdir (7f3831e5)

Chores

• readme: update recent updates section (c97a9b05)
• update package version (ce620ed8)
• update package lock (fc32a165)
• update package version (9c933e97)

Continuous Integration

• rmwc:
  • Release of v8.0.6 (fe499076)
  • Release of v8.0.5 (#851) (0b280ac1)
  • Release 8.0.4 (#846) (0b4ab072)

Bug Fixes

• menu:
  • add disabled opacity style (a4076f46)
  • Disable events when disabled is true (fe694827)
  • Correctly renderToPortal for menu (#850) (1f490cad)
• select: Fix controlled enhanced select bug (#844) (530d7912)

Other Changes

• build: Fix build on Windows (2a1658fb)