Floating Action Button

Floating Action Button (FAB, 플로팅 액션 버튼)

Floating Action Button(FAB)은 화면에서 기본(primary)이거나 가장 흔한 동작을 수행하는 버튼이에요.

플로팅 액션 버튼은 모든 화면 콘텐츠 앞에 나타나며, 보통 중앙에 아이콘이 있는 원형 모양이에요. FAB에는 일반(regular)과 확장(extended) 두 가지 타입이 있어요.

FAB는 화면의 기본 동작을 표현하는 가장 적절한 방법일 때만 사용하세요. 화면당 가장 흔한 동작을 나타내는 컴포넌트는 하나만 권장돼요.

출처: 문서

본문

기본 FAB (Basic FAB)

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)

기본적으로 크기는 large예요. 더 작은 플로팅 액션 버튼에는 size prop을 사용하세요.

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

플로팅 액션 버튼은 기본적으로 확장되는 재질(material) 조각처럼 화면에 애니메이션되어 등장해요.

여러 가로 화면(예: 탭 화면)에 걸쳐 있는 플로팅 액션 버튼은, 동작이 바뀌면 잠시 사라졌다가 다시 나타나야 해요.

Zoom 전환(transition)을 이용하면 이를 구현할 수 있어요. 퇴장과 등장 애니메이션이 동시에 트리거되기 때문에, 기존 Floating Action Button의 애니메이션이 끝난 뒤 새 버튼이 등장하도록 enterDelay를 사용한다는 점에 유의하세요.

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 const,
      sx: fabStyle as SxProps,
      icon: <AddIcon />,
      label: 'Add',
    },
    {
      color: 'secondary' as const,
      sx: fabStyle as SxProps,
      icon: <EditIcon />,
      label: 'Edit',
    },
    {
      color: 'inherit' as const,
      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>
  );
}

Fab API

Demos

이 React 컴포넌트 사용법에 대한 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 주세요:

Import

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

Props

Name Type Default Required Description
children node - No 컴포넌트 콘텐츠입니다.
classes object - No 컴포넌트에 적용되는 스타일을 덮어쓰거나 확장합니다.
color 'default' | 'error' | 'info' | 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | string 'default' No 컴포넌트의 색상입니다.
component elementType - No 루트 노드에 사용할 컴포넌트입니다.
disabled bool false No 컴포넌트가 비활성화되었는지 여부입니다.
disableFocusRipple bool false No 포커스 잉크(ripple) 효과를 제거할지 여부입니다.
disableRipple bool - No 잉크(ripple) 효과를 제거할지 여부입니다.
href string - No 버튼을 링크로 만들 URL입니다.
size 'small' | 'medium' | 'large' | string 'large' No 컴포넌트의 크기입니다.
sx Array<func | object | bool> | func | object - No 시스템 오버라이드와 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop입니다.
variant 'circular' | 'extended' | string 'circular' No 컴포넌트의 변형(variant)입니다.

Note: ref는 루트 요소(HTMLButtonElement)로 전달됩니다.

그 외에 제공된 다른 props는 모두 루트 요소(ButtonBase)에 전달됩니다.

상속 (Inheritance)

위에서 명시적으로 문서화되지는 않았지만, ButtonBase 컴포넌트의 props도 Fab에서 사용할 수 있어요.

테마 기본 props (Theme default props)

MuiFab를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.

CSS

규칙 이름 (Rule name)

Global class Rule name Description
- circular variant="circular"일 때 루트 요소에 적용되는 스타일입니다.
- colorInherit color="inherit"일 때 루트 요소에 적용되는 스타일입니다.
.Mui-disabled - disabled={true}일 때 루트 요소에 적용되는 상태 클래스입니다.
- extended variant="extended"일 때 루트 요소에 적용되는 스타일입니다.
.Mui-focusVisible - 버튼이 키보드로 포커스되었을 때 ButtonBase 루트 요소에 적용되는 상태 클래스입니다.
- primary color="primary"일 때 루트 요소에 적용되는 스타일입니다.
- root 루트 요소에 적용되는 스타일입니다.
- secondary color="secondary"일 때 루트 요소에 적용되는 스타일입니다.
- sizeMedium size="medium"일 때 루트 요소에 적용되는 스타일입니다.
- sizeSmall size="small"일 때 루트 요소에 적용되는 스타일입니다.

소스 코드 (Source code)

이 페이지에서 정보를 찾지 못했다면 컴포넌트 구현을 살펴보는 것도 방법이에요.

더 알아보기 (Learn more)