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 large lowered>
<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 auto-hide-label fixed id=fixed-fab position-bottom-right>
<mc-icon>edit</mc-icon>
<span slot=label>Example</span>
</mc-fab>
<mc-fab auto-hide fixed id=fixed-fab 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);