Example
This section contains component attributes, token mappings, and default values for
quick reference or building your own
design files and implementations
Edit
Lowered
Edit
<mc-fab large>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab surface>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab small tertiary>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab secondary>
<mc-icon>edit</mc-icon>
<div slot="label">Edit</div>
</mc-fab>
<mc-fab lowered large>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab lowered surface>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab lowered small tertiary>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab lowered secondary>
<mc-icon>edit</mc-icon>
<div slot="label">Edit</div>
</mc-fab>
FAB positioning
<mc-fab mc-position-bottom-right>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab position-bottom-left>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab position-top-right>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab position-top-left>
<mc-icon>edit</mc-icon>
</mc-fab>
FAB colors
<mc-fab>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab surface>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab secondary>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab tertiary>
<mc-icon>edit</mc-icon>
</mc-fab>
FAB sizes
<mc-fab>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab small>
<mc-icon>edit</mc-icon>
</mc-fab>
<mc-fab large>
<mc-icon>edit</mc-icon>
</mc-fab>
FAB label
<mc-fab>
<span slot="label">Label</span>
<mc-icon>edit</mc-icon>
</mc-fab>
Fixed position
The FAB in the bottom right corner of the page. If you do not set it to fixed then it would be bound to the bottom
right of this container.
edit
Example
<mc-fab id="fixed-fab" auto-hide-label fixed position-bottom-right>
<mc-icon>edit</mc-icon>
<span slot="label">Example</span>
</mc-fab>
<mc-fab id="fixed-fab" auto-hide fixed position-bottom-right>
<mc-icon>edit</mc-icon>
<span slot="label">Example</span>
</mc-fab>
Style
CSS variables that allow you override default values
/* Optional variables for overriding */
--mc-fab-shape: var(--mc-shape-large);
--mc-fab-shape-large: var(--mc-shape-extra-large);
--mc-fab-shape-small: var(--mc-shape-medium);
--mc-fab-color: var(--mc-on-primary-container);
--mc-fab-container-color: var(--mc-primary-container);
--mc-fab-color-surface: var(--mc-primary);
--mc-fab-container-color-surface: var(--mc-surface-container-hight);
--mc-fab-color-surface-lowered: var(--mc-on-secondary-container);
--mc-fab-container-color-surface-lowered: var(--mc-secondary-container);
--mc-fab-color-secondary: var(--mc-on-secondary-container);
--mc-fab-container-color-secondary: var(--mc-secondary-container);
--mc-fab-color-tertiary: var(--mc-on-tertiary-container);
--mc-fab-container-color-tertiary: var(--mc-tertiary-container);