The latest SMUI v3 beta had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.

Basic Usage

<Fab on:click={doSomething}><Icon class="material-icons">favorite</Icon></Fab>

<script>
  import Fab, { Icon } from '@smui/fab';

  function doSomething() {
    alert('something');
  }
</script>

Demo

in action: https://sveltematerialui.com/demo/fab

demo code: https://github.com/hperrin/svelte-material-ui/blob/master/site/src/routes/demo/fab/

Exports

(default)

A floating action button.

Options / Defaults

use: [] - An array of actions and/or action/property arrays.
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.

Events

All standard UI events are forwarded.

Label

A text label.

See the common label readme.

Icon

A graphic icon.

See the common icon readme.

More Information

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

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

Keywords

FAQs

What is @smui/fab?

Is @smui/fab popular?

Is @smui/fab well maintained?

Package last updated on 11 Apr 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@smui/fab

Svelte Material UI - Floating Action Button

Installation

Whoa There, These Docs are Outdated

Basic Usage

Demo