SINGULARITY
DOCS
Reference
Floating Action Button
A Floating Action Button (FAB) executes the primary or most frequently used action on a screen.
A Floating Action Button floats above all screen content, typically as a circular element featuring an icon at its center. FABs are available in two variants: standard and extended.
Employ a FAB only when it is the most appropriate method to highlight a screen’s primary action. It’s recommended to use a single FAB per screen to represent the most common action.
Basic FAB
import * as React from 'react';
import Box from '@mui/material/Box';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import FavoriteIcon from '@mui/icons-material/Favorite';
import NavigationIcon from '@mui/icons-material/Navigation';
export default function FloatingActionButtons() {
return (
<Box sx={{ '& > :not(style)': { m: 1 } }}>
<Fab color="primary" aria-label="add">
<AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
<EditIcon />
</Fab>
<Fab variant="extended">
<NavigationIcon sx={{ mr: 1 }} />
Navigate
</Fab>
<Fab disabled aria-label="like">
<FavoriteIcon />
</Fab>
</Box>
);
}Size
The default size is
large. Use the size prop to create smaller floating action buttons.import * as React from 'react';
import Box from '@mui/material/Box';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
export default function FloatingActionButtonSize() {
return (
<Box sx={{ '& > :not(style)': { m: 1 } }}>
<Fab size="small" color="secondary" aria-label="add">
<AddIcon />
</Fab>
<Fab size="medium" color="secondary" aria-label="add">
<AddIcon />
</Fab>
<Fab color="secondary" aria-label="add">
<AddIcon />
</Fab>
</Box>
);
}import * as React from 'react';
import Box from '@mui/material/Box';
import Fab from '@mui/material/Fab';
import NavigationIcon from '@mui/icons-material/Navigation';
export default function FloatingActionButtonExtendedSize() {
return (
<Box sx={{ '& > :not(style)': { m: 1 } }}>
<Fab variant="extended" size="small" color="primary">
<NavigationIcon sx={{ mr: 1 }} />
Extended
</Fab>
<Fab variant="extended" size="medium" color="primary">
<NavigationIcon sx={{ mr: 1 }} />
Extended
</Fab>
<Fab variant="extended" color="primary">
<NavigationIcon sx={{ mr: 1 }} />
Extended
</Fab>
</Box>
);
}Animation
By default, the floating action button expands onto the screen as a piece of material.
For a floating action button spanning multiple lateral screens (e.g., tabbed interfaces), it should briefly vanish and then reappear if its action changes.
The Zoom transition can be applied to achieve this effect. Since both exit and entry animations occur simultaneously, the
enterDelay prop is used to ensure the outgoing Floating Action Button’s animation completes before the new one appears.Item One
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Zoom from '@mui/material/Zoom';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import UpIcon from '@mui/icons-material/KeyboardArrowUp';
import { green } from '@mui/material/colors';
import Box from '@mui/material/Box';
import { SxProps } from '@mui/system';
interface TabPanelProps {
children?: React.ReactNode;
dir?: string;
index: number;
value: number;
}
function TabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<Typography
component="div"
role="tabpanel"
hidden={value !== index}
id={`action-tabpanel-${index}`}
aria-labelledby={`action-tab-${index}`}
{...other}
>
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</Typography>
);
}
function a11yProps(index: any) {
return {
id: `action-tab-${index}`,
'aria-controls': `action-tabpanel-${index}`,
};
}
const fabStyle = {
position: 'absolute',
bottom: 16,
right: 16,
};
const fabGreenStyle = {
color: 'common.white',
bgcolor: green[500],
'&:hover': {
bgcolor: green[600],
},
};
export default function FloatingActionButtonZoom() {
const theme = useTheme();
const [value, setValue] = React.useState(0);
const handleChange = (event: unknown, newValue: number) => {
setValue(newValue);
};
const transitionDuration = {
enter: theme.transitions.duration.enteringScreen,
exit: theme.transitions.duration.leavingScreen,
};
const fabs = [
{
color: 'primary' as 'primary',
sx: fabStyle as SxProps,
icon: <AddIcon />,
label: 'Add',
},
{
color: 'secondary' as 'secondary',
sx: fabStyle as SxProps,
icon: <EditIcon />,
label: 'Edit',
},
{
color: 'inherit' as 'inherit',
sx: { ...fabStyle, ...fabGreenStyle } as SxProps,
icon: <UpIcon />,
label: 'Expand',
},
];
return (
<Box
sx={{
bgcolor: 'background.paper',
width: 500,
position: 'relative',
minHeight: 200,
}}
>
<AppBar position="static" color="default">
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
variant="fullWidth"
aria-label="action tabs example"
>
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0} dir={theme.direction}>
Item One
</TabPanel>
<TabPanel value={value} index={1} dir={theme.direction}>
Item Two
</TabPanel>
<TabPanel value={value} index={2} dir={theme.direction}>
Item Three
</TabPanel>
{fabs.map((fab, index) => (
<Zoom
key={fab.color}
in={value === index}
timeout={transitionDuration}
style={{
transitionDelay: `${value === index ? transitionDuration.exit : 0}ms`,
}}
unmountOnExit
>
<Fab sx={fab.sx} aria-label={fab.label} color={fab.color}>
{fab.icon}
</Fab>
</Zoom>
))}
</Box>
);
}