Svelte Material UI - Floating Action Button

Floating action buttons represent the primary action in a screen or app.

Installation

npm install --save-dev @smui/fab

A floating action button.

component: href == null ? Button : A - A component to use as the root element.
use: [] - An array of Svelte actions and/or arrays of an action and its options.
class: '' - A CSS class string.
ripple: true - Whether to implement a ripple for when the component is interacted with.
color: 'secondary' - The FAB's color. ('primary' or 'secondary')
mini: false - Whether to make the FAB smaller.
exited: false - Whether the FAB is not visible. Changing this will cause the FAB to animate in/out.
extended: false - Whether the FAB contains a label.
touch: false - Increase the touch target.
href: undefined - If the href property is set, the button will use an anchor element, instead of a button element.

A text label.

A graphic icon.

See Buttons: floating action button in the Material design spec.

See FAB in MDC-Web for information about the upstream library's architecture.