Floating Action Button

A Floating Action Button (FAB) performs the primary, or most common, action on a screen.

A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended.

Only use a FAB if it is the most suitable way to present a screen's primary action. Only one component is recommended per screen to represent the most common action.

Basic link

Variants link 

<x-mbc::fab icon="add" variant="regular" />
<x-mbc::fab icon="add" variant="mini" />

Extended link 

<x-mbc::fab label="Order" />
<x-mbc::fab icon="add" label="Create" />

Properties link

mbc::fab link

Name Type Default Description
color theme color | css color | string 'secondary' The color of the FAB.
disabled bool false If true, the FAB will be disabled.
icon string null The icon to display.
label string null The label to display.
variant 'regular' | 'mini' | string 'regular' The variant of the FAB.

References link

Edit this page