Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

FABs

The FAB represents the most important action on a screen. It puts key actions within reach
Material Design Guidelines: FAB

Example

This section contains component attributes, token mappings, and default values for quick reference or building your own design files and implementations
edit edit edit edit
Edit
Lowered
edit edit edit edit
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

edit edit edit edit
<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

edit edit edit edit
<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

edit edit edit
<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

Label edit
<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);
            
menu home apps Get started