Floating Action Button (FAB)

Overview

A Floating Action Button (FAB) performs the primary or most common action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center, and represents the primary action of a screen.

Please refer to this for more information: https://mui.com/material-ui/react-floating-action-button/.

Import

CODE

import { Fab } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Type: None Size Unit: Px	The component Size includes Type, Width and Height with many selectable Size Units.
Layout	Position: relative Size Unit: Px	The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.
Text	Font-family: None Font-weight: Normal Text align: Left Size Unit: Px	The component Text includes Font-family, Font-size, Font-weight, Font-color, Text-align.
General	Disabled: False Visibility: none Opacity: 100%	The component General includes Disabled, Visibility, Opacity, and Background.
Link	Type: None	The component Link includes Href and Type.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<Fab     sx={{':hover': {'margin': '20px 30px 20px 20px','padding': '20px 20px 20px 30px',
              'width': '15px','height': '15px',
              'position': 'absolute','top': '15px',right': '15px','left': '15px','bottom': '20px',
              'fontFamily': 'Noto-Sans','fontSize': '15px','color': '#ff0000ff','fontWeight': 'lighter','justifyContent': 'center',
              'visibility': 'visible',
              'opacity': 0.41,
              'backgroundColor': '#3300ffff',},}}
               size="medium"
               disabled={true}
               target="_self"
               href="hello.com">Text1
 </Fab>