Button Group

Button Group (버튼 그룹)

ButtonGroup 컴포넌트를 사용해 관련된 버튼들을 그룹으로 묶을 수 있어요.

출처: 문서

본문

기본 버튼 그룹 (Basic button group)

버튼을 ButtonGroup 컴포넌트로 감싸면 버튼들을 그룹으로 묶을 수 있어요. 버튼들은 직접적인 자식(immediate children)이어야 해요.

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';

export default function BasicButtonGroup() {
  return (
    <ButtonGroup variant="contained" aria-label="Basic button group">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

버튼 변형 (Button variants)

표준 버튼 변형(variant)들을 모두 지원해요.

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Box from '@mui/material/Box';

export default function VariantButtonGroup() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& > *': {
          m: 1,
        },
      }}
    >
      <ButtonGroup variant="outlined" aria-label="Basic button group">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="text" aria-label="Basic button group">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </Box>
  );
}

크기와 색상 (Sizes and colors)

size와 color props를 사용해 버튼 그룹의 모양을 제어할 수 있어요.

import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import ButtonGroup from '@mui/material/ButtonGroup';

const buttons = [
  <Button key="one">One</Button>,
  <Button key="two">Two</Button>,
  <Button key="three">Three</Button>,
];

export default function GroupSizesColors() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& > *': {
          m: 1,
        },
      }}
    >
      <ButtonGroup size="small" aria-label="Small button group">
        {buttons}
      </ButtonGroup>
      <ButtonGroup color="secondary" aria-label="Medium-sized button group">
        {buttons}
      </ButtonGroup>
      <ButtonGroup size="large" aria-label="Large button group">
        {buttons}
      </ButtonGroup>
    </Box>
  );
}

세로 그룹 (Vertical group)

orientation prop을 사용해 버튼 그룹을 세로로 표시할 수 있어요.

import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import Box from '@mui/material/Box';

const buttons = [
  <Button key="one">One</Button>,
  <Button key="two">Two</Button>,
  <Button key="three">Three</Button>,
];

export default function GroupOrientation() {
  return (
    <Box
      sx={{
        display: 'flex',
        '& > *': {
          m: 1,
        },
      }}
    >
      <ButtonGroup orientation="vertical" aria-label="Vertical button group">
        {buttons}
      </ButtonGroup>
      <ButtonGroup
        orientation="vertical"
        aria-label="Vertical button group"
        variant="contained"
      >
        {buttons}
      </ButtonGroup>
      <ButtonGroup
        orientation="vertical"
        aria-label="Vertical button group"
        variant="text"
      >
        {buttons}
      </ButtonGroup>
    </Box>
  );
}

분할 버튼 (Split button)

ButtonGroup은 분할 버튼(split button)을 만드는 데도 사용할 수 있어요. 드롭다운이 버튼 동작을 바꾸거나(이 예시처럼) 관련 동작을 즉시 트리거하는 데 사용할 수 있어요.

import * as React from 'react';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Grow from '@mui/material/Grow';
import Paper from '@mui/material/Paper';
import Popper from '@mui/material/Popper';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';

const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];

export default function SplitButton() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef<HTMLDivElement>(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleClick = () => {
    console.info(`You clicked ${options[selectedIndex]}`);
  };

  const handleMenuItemClick = (
    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
    index: number,
  ) => {
    setSelectedIndex(index);
    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event: Event) => {
    if (
      anchorRef.current &&
      anchorRef.current.contains(event.target as HTMLElement)
    ) {
      return;
    }

    setOpen(false);
  };

  return (
    <React.Fragment>
      <ButtonGroup
        variant="contained"
        ref={anchorRef}
        aria-label="Button group with a nested menu"
      >
        <Button onClick={handleClick}>{options[selectedIndex]}</Button>
        <Button
          size="small"
          aria-controls={open ? 'split-button-menu' : undefined}
          aria-expanded={open ? 'true' : undefined}
          aria-label="select merge strategy"
          aria-haspopup="menu"
          onClick={handleToggle}
        >
          <ArrowDropDownIcon />
        </Button>
      </ButtonGroup>
      <Popper
        sx={{ zIndex: 1 }}
        open={open}
        anchorEl={anchorRef.current}
        role={undefined}
        transition
        disablePortal
      >
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin:
                placement === 'bottom' ? 'center top' : 'center bottom',
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList id="split-button-menu" autoFocusItem>
                  {options.map((option, index) => (
                    <MenuItem
                      key={option}
                      disabled={index === 2}
                      selected={index === selectedIndex}
                      onClick={(event) => handleMenuItemClick(event, index)}
                    >
                      {option}
                    </MenuItem>
                  ))}
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </React.Fragment>
  );
}

입체감 제거 (Disabled elevation)

disableElevation prop으로 입체감(elevation)을 제거할 수 있어요.

import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';

export default function DisableElevation() {
  return (
    <ButtonGroup
      disableElevation
      variant="contained"
      aria-label="Disabled button group"
    >
      <Button>One</Button>
      <Button>Two</Button>
    </ButtonGroup>
  );
}

로딩 (Loading)

Button의 loading prop을 사용해 버튼을 로딩 상태로 만들고 상호작용을 비활성화할 수 있어요.

import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';
import SaveIcon from '@mui/icons-material/Save';

export default function LoadingButtonGroup() {
  return (
    <ButtonGroup variant="outlined" aria-label="Loading button group">
      <Button>Submit</Button>
      <Button>Fetch data</Button>
      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
        Save
      </Button>
    </ButtonGroup>
  );
}

Button API

Demos

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

Import

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

Props

Name Type Default Required Description
children node - No 컴포넌트 콘텐츠입니다.
classes object - No 컴포넌트에 적용되는 스타일을 덮어쓰거나 확장합니다.
color 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string 'primary' No 컴포넌트의 색상입니다.
component elementType - No 루트 노드에 사용할 컴포넌트입니다.
disabled bool false No 컴포넌트가 비활성화되었는지 여부입니다.
disableElevation bool false No 입체감(elevation)을 제거할지 여부입니다.
disableFocusRipple bool false No 포커스 잉크(ripple) 효과를 제거할지 여부입니다.
disableRipple bool false No 잉크(ripple) 효과를 제거할지 여부입니다.
endIcon node - No 버튼 텍스트 뒤에 표시할 요소입니다.
fullWidth bool false No 버튼이 부모를 채우도록 할지 여부입니다.
href string - No 버튼을 링크로 만들 URL입니다.
loading bool null No 버튼이 로딩 상태인지 여부입니다.
loadingIndicator node <CircularProgress color="inherit" size={16} /> No 로딩 상태에서 버튼에 표시할 요소입니다.
loadingPosition 'center' | 'end' | 'start' 'center' No 로딩 인디케이터의 위치입니다.
size 'small' | 'medium' | 'large' | string 'medium' No 컴포넌트의 크기입니다.
startIcon node - No 버튼 텍스트 앞에 표시할 요소입니다.
sx Array<func | object | bool> | func | object - No 시스템 오버라이드와 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop입니다.
variant 'contained' | 'outlined' | 'text' | string 'text' No 컴포넌트의 변형(variant)입니다.

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

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

상속 (Inheritance)

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

테마 기본 props (Theme default props)

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

CSS

규칙 이름 (Rule name)

Global class Rule name Description
- colorError color="error"일 때 루트 요소에 적용되는 스타일입니다.
- colorInfo color="info"일 때 루트 요소에 적용되는 스타일입니다.
- colorInherit color="inherit"일 때 루트 요소에 적용되는 스타일입니다.
- colorPrimary color="primary"일 때 루트 요소에 적용되는 스타일입니다.
- colorSecondary color="secondary"일 때 루트 요소에 적용되는 스타일입니다.
- colorSuccess color="success"일 때 루트 요소에 적용되는 스타일입니다.
- colorWarning color="warning"일 때 루트 요소에 적용되는 스타일입니다.
- contained variant="contained"일 때 루트 요소에 적용되는 스타일입니다.
.Mui-disabled - disabled={true}일 때 루트 요소에 적용되는 상태 클래스입니다.
- disableElevation disableElevation={true}일 때 루트 요소에 적용되는 스타일입니다.
- endIcon 제공되었을 때 endIcon 요소에 적용되는 스타일입니다.
.Mui-focusVisible - 버튼이 키보드로 포커스되었을 때 ButtonBase 루트 요소에 적용되는 상태 클래스입니다.
- fullWidth fullWidth={true}일 때 루트 요소에 적용되는 스타일입니다.
- icon 제공되었을 때 아이콘 요소에 적용되는 스타일입니다.
- loading loading={true}일 때 루트 요소에 적용되는 스타일입니다.
- loadingIconPlaceholder loadingIconPlaceholder 요소에 적용되는 스타일입니다.
- loadingIndicator loadingIndicator 요소에 적용되는 스타일입니다.
- loadingPositionCenter loadingPosition="center"일 때 루트 요소에 적용되는 스타일입니다.
- loadingPositionEnd loadingPosition="end"일 때 루트 요소에 적용되는 스타일입니다.
- loadingPositionStart loadingPosition="start"일 때 루트 요소에 적용되는 스타일입니다.
- loadingWrapper loadingWrapper 요소에 적용되는 스타일입니다.
- outlined variant="outlined"일 때 루트 요소에 적용되는 스타일입니다.
- root 루트 요소에 적용되는 스타일입니다.
- sizeLarge size="large"일 때 루트 요소에 적용되는 스타일입니다.
- sizeMedium size="medium"일 때 루트 요소에 적용되는 스타일입니다.
- sizeSmall size="small"일 때 루트 요소에 적용되는 스타일입니다.
- startIcon 제공되었을 때 startIcon 요소에 적용되는 스타일입니다.
- text variant="text"일 때 루트 요소에 적용되는 스타일입니다.

소스 코드 (Source code)

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

ButtonGroup API

Demos

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

Import

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

Props

Name Type Default Required Description
children node - No 컴포넌트 콘텐츠입니다.
classes object - No 컴포넌트에 적용되는 스타일을 덮어쓰거나 확장합니다.
color 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string 'primary' No 컴포넌트의 색상입니다.
component elementType - No 루트 노드에 사용할 컴포넌트입니다.
disabled bool false No 그룹이 비활성화되었는지 여부입니다.
disableElevation bool false No 입체감(elevation)을 제거할지 여부입니다.
disableFocusRipple bool false No 포커스 잉크(ripple) 효과를 제거할지 여부입니다.
disableRipple bool false No 잉크(ripple) 효과를 제거할지 여부입니다.
fullWidth bool false No 그룹이 부모를 채우도록 할지 여부입니다.
orientation 'horizontal' | 'vertical' 'horizontal' No 그룹의 방향입니다.
size 'small' | 'medium' | 'large' | string 'medium' No 컴포넌트의 크기입니다.
sx Array<func | object | bool> | func | object - No 시스템 오버라이드와 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop입니다.
variant 'contained' | 'outlined' | 'text' | string 'outlined' No 컴포넌트의 변형(variant)입니다.

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

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

테마 기본 props (Theme default props)

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

CSS

규칙 이름 (Rule name)

Global class Rule name Description
- colorPrimary color="primary"일 때 루트 요소에 적용되는 스타일입니다.
- colorSecondary color="secondary"일 때 루트 요소에 적용되는 스타일입니다.
- contained variant="contained"일 때 루트 요소에 적용되는 스타일입니다.
.Mui-disabled - disabled={true}일 때 자식 요소에 적용되는 상태 클래스입니다.
- disableElevation disableElevation={true}일 때 루트 요소에 적용되는 스타일입니다.
- firstButton 버튼 그룹의 첫 번째 버튼에 적용되는 스타일입니다.
- fullWidth fullWidth={true}일 때 루트 요소에 적용되는 스타일입니다.
- grouped 자식 요소들에 적용되는 스타일입니다.
- horizontal orientation="horizontal"일 때 루트 요소에 적용되는 스타일입니다.
- lastButton 버튼 그룹의 마지막 버튼에 적용되는 스타일입니다.
- middleButton 버튼 그룹 중간의 버튼들에 적용되는 스타일입니다.
- outlined variant="outlined"일 때 루트 요소에 적용되는 스타일입니다.
- root 루트 요소에 적용되는 스타일입니다.
- text variant="text"일 때 루트 요소에 적용되는 스타일입니다.
- vertical orientation="vertical"일 때 루트 요소에 적용되는 스타일입니다.

소스 코드 (Source code)

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

더 알아보기 (Learn more)