Button
Button
Button은 사용자가 한 번의 탭으로 동작을 실행하고 선택을 하게 해주는 컴포넌트예요. 클릭이나 탭이라는 가장 기본적인 상호작용을 담당하니, 사용자에게 어떤 동작을 안내하고 싶을 때 가장 먼저 떠올리는 컴포넌트랍니다.
출처: 문서
본문
Button은 사용자가 한 번의 탭으로 동작을 취하고 선택을 할 수 있게 해줘요.
Button은 사용자가 취할 수 있는 동작을 전달해요. 보통 UI 곳곳, 예를 들어 다음과 같은 곳에 배치됩니다:
- 모달 창(Modal windows)
- 폼(Forms)
- 카드(Cards)
- 툴바(Toolbars)
기본 버튼 (Basic button)
Button은 세 가지 변형(variants)을 제공해요: text(기본), contained, outlined.
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function BasicButtons() {
return (
<Stack spacing={2} direction="row">
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</Stack>
);
}
Text 버튼 (Text button)
Text 버튼은 보통 덜 중요한 동작에 사용되며, 다이얼로그나 카드 안에 있는 경우가 많아요. 카드에서는 text 버튼이 카드 콘텐츠에 대한 강조를 유지하는 데 도움을 줍니다.
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function TextButtons() {
return (
<Stack direction="row" spacing={2}>
<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>
</Stack>
);
}
Contained 버튼 (Contained button)
Contained 버튼은 높은 강조(high-emphasis)를 가지며, elevation과 fill 사용으로 구별돼요. 이것들은 앱에서 핵심적인 동작을 담고 있어요.
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function ContainedButtons() {
return (
<Stack direction="row" spacing={2}>
<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
Link
</Button>
</Stack>
);
}
disableElevation prop으로 elevation을 제거할 수 있어요.
import Button from '@mui/material/Button';
export default function DisableElevation() {
return (
<Button variant="contained" disableElevation>
Disable elevation
</Button>
);
}
Outlined 버튼 (Outlined button)
Outlined 버튼은 중간 강조(medium-emphasis) 버튼이에요. 앱에서 핵심 동작은 아니지만 중요한 동작을 담고 있어요.
Outlined 버튼은 또한 contained 버튼보다는 낮은 강조의 대안이거나, text 버튼보다는 높은 강조의 대안이에요.
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function OutlinedButtons() {
return (
<Stack direction="row" spacing={2}>
<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
Disabled
</Button>
<Button variant="outlined" href="#outlined-buttons">
Link
</Button>
</Stack>
);
}
클릭 처리하기 (Handling clicks)
모든 컴포넌트는 루트 DOM 요소에 적용되는 onClick 핸들러를 받아들여요.
<Button
onClick={() => {
alert('clicked');
}}
>
Click me
</Button>
문서는 컴포넌트의 API 섹션에서 네이티브 props(아주 많아요)를 언급하는 것을 피한다는 점을 알아두세요.
색상 (Color)
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function ColorButtons() {
return (
<Stack direction="row" spacing={2}>
<Button color="secondary">Secondary</Button>
<Button variant="contained" color="success">
Success
</Button>
<Button variant="outlined" color="error">
Error
</Button>
</Stack>
);
}
기본 버튼 색상 외에도 커스텀 색상을 추가하거나, 필요하지 않은 색상을 비활성화할 수 있어요. 자세한 내용은 새 색상 추가하기 예제를 참고하세요.
크기 (Sizes)
더 크거나 작은 버튼이 필요하다면 size prop을 사용하세요.
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
export default function ButtonSizes() {
return (
<Box sx={{ '& button': { m: 1 } }}>
<div>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</div>
<div>
<Button variant="outlined" size="small">
Small
</Button>
<Button variant="outlined" size="medium">
Medium
</Button>
<Button variant="outlined" size="large">
Large
</Button>
</div>
<div>
<Button variant="contained" size="small">
Small
</Button>
<Button variant="contained" size="medium">
Medium
</Button>
<Button variant="contained" size="large">
Large
</Button>
</div>
</Box>
);
}
아이콘과 라벨이 있는 버튼 (Buttons with icons and label)
때로는 특정 버튼에 아이콘을 넣고 싶을 수 있는데, 우리는 일반 텍스트보다 로고를 더 쉽게 인식하므로 그렇게 하면 앱의 UX를 향상시킬 수 있어요. 예를 들어 삭제 버튼이 있다면 휴지통 아이콘으로 라벨을 붙일 수 있죠.
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';
export default function IconLabelButtons() {
return (
<Stack direction="row" spacing={2}>
<Button variant="outlined" startIcon={<DeleteIcon />}>
Delete
</Button>
<Button variant="contained" endIcon={<SendIcon />}>
Send
</Button>
</Stack>
);
}
아이콘 버튼 (Icon button)
아이콘 버튼은 앱 바(app bars)와 툴바에서 흔히 볼 수 있어요.
아이콘은 또한 단일 선택을 선택/해제할 수 있는 토글 버튼에 적합한데, 예를 들어 항목에 별표를 추가하거나 제거하는 경우에 쓰여요.
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import AlarmIcon from '@mui/icons-material/Alarm';
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
export default function IconButtons() {
return (
<Stack direction="row" spacing={1}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
<DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
<AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</Stack>
);
}
크기 (Sizes)
더 크거나 작은 아이콘 버튼이 필요하다면 size prop을 사용하세요.
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
export default function IconButtonSizes() {
return (
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
<IconButton aria-label="delete" size="small">
<DeleteIcon fontSize="inherit" />
</IconButton>
<IconButton aria-label="delete" size="small">
<DeleteIcon fontSize="small" />
</IconButton>
<IconButton aria-label="delete" size="large">
<DeleteIcon />
</IconButton>
<IconButton aria-label="delete" size="large">
<DeleteIcon fontSize="inherit" />
</IconButton>
</Stack>
);
}
색상 (Colors)
color prop을 사용해서 테마의 색상 팔레트를 컴포넌트에 적용하세요.
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import Fingerprint from '@mui/icons-material/Fingerprint';
export default function IconButtonColors() {
return (
<Stack direction="row" spacing={1}>
<IconButton aria-label="fingerprint" color="secondary">
<Fingerprint />
</IconButton>
<IconButton aria-label="fingerprint" color="success">
<Fingerprint />
</IconButton>
</Stack>
);
}
로딩 (Loading)
v6.4.0부터 loading prop을 사용해서 아이콘 버튼을 로딩 상태로 만들고 상호작용을 비활성화할 수 있어요.
import * as React from 'react';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
export default function LoadingIconButton() {
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
const timeout = setTimeout(() => {
setLoading(false);
}, 2000);
return () => clearTimeout(timeout);
});
return (
<Tooltip title="Click to see loading">
<IconButton onClick={() => setLoading(true)} loading={loading}>
<ShoppingCartIcon />
</IconButton>
</Tooltip>
);
}
배지 (Badge)
Badge 컴포넌트를 사용해서 IconButton에 배지를 추가할 수 있어요.
import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import Badge, { badgeClasses } from '@mui/material/Badge';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
const CartBadge = styled(Badge)`
& .${badgeClasses.badge} {
top: -12px;
right: -6px;
}
`;
export default function IconButtonWithBadge() {
return (
<IconButton aria-label="view cart with 2 items">
<ShoppingCartIcon fontSize="small" />
<CartBadge badgeContent={2} color="primary" overlap="circular" />
</IconButton>
);
}
파일 업로드 (File upload)
파일 업로드 버튼을 만들려면 component="label"을 사용해서 버튼을 label로 바꾸고, file 타입의 시각적으로 숨겨진(visually-hidden) input을 만드세요.
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
const VisuallyHiddenInput = styled('input')({
clipPath: 'inset(50%)',
height: 1,
overflow: 'hidden',
position: 'absolute',
bottom: 0,
left: 0,
whiteSpace: 'nowrap',
width: 1,
});
export default function InputFileUpload() {
return (
<Button
component="label"
role={undefined}
variant="contained"
tabIndex={-1}
startIcon={<CloudUploadIcon />}
>
Upload files
<VisuallyHiddenInput
type="file"
onChange={(event) => console.log(event.target.files)}
multiple
/>
</Button>
);
}
로딩 (Loading)
v6.4.0부터 loading prop을 사용해서 버튼을 로딩 상태로 만들고 상호작용을 비활성화할 수 있어요.
import Button from '@mui/material/Button';
import SaveIcon from '@mui/icons-material/Save';
import Stack from '@mui/material/Stack';
export default function LoadingButtons() {
return (
<Stack spacing={2}>
<Stack direction="row" spacing={2}>
<Button loading variant="outlined">
Submit
</Button>
<Button loading loadingIndicator="Loading…" variant="outlined">
Fetch data
</Button>
<Button
loading
loadingPosition="start"
startIcon={<SaveIcon />}
variant="outlined"
>
Save
</Button>
</Stack>
<Button
fullWidth
loading
loadingPosition="start"
startIcon={<SaveIcon />}
variant="outlined"
>
Full width
</Button>
<Button
fullWidth
loading
loadingPosition="end"
endIcon={<SaveIcon />}
variant="outlined"
>
Full width
</Button>
<Stack direction="row" spacing={2}>
<Button loading variant="outlined" loadingPosition="start">
Submit
</Button>
<Button loading variant="outlined" loadingPosition="end">
Submit
</Button>
<Button
loading
variant="outlined"
loadingPosition="end"
startIcon={<SaveIcon />}
>
Save
</Button>
</Stack>
</Stack>
);
}
로딩 스위치를 토글하면 서로 다른 상태 사이의 트랜지션을 볼 수 있어요.
import * as React from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import SaveIcon from '@mui/icons-material/Save';
import SendIcon from '@mui/icons-material/Send';
export default function LoadingButtonsTransition() {
const [loading, setLoading] = React.useState(true);
function handleClick() {
setLoading(true);
}
return (
<div>
<FormControlLabel
sx={{ display: 'block' }}
control={
<Switch
checked={loading}
onChange={() => setLoading(!loading)}
name="loading"
color="primary"
/>
}
label="Loading"
/>
<Box sx={{ '& > button': { m: 1 } }}>
<Button
size="small"
onClick={handleClick}
loading={loading}
variant="outlined"
disabled
>
Disabled
</Button>
<Button
size="small"
onClick={handleClick}
loading={loading}
loadingIndicator="Loading…"
variant="outlined"
>
Fetch data
</Button>
<Button
size="small"
onClick={handleClick}
endIcon={<SendIcon />}
loading={loading}
loadingPosition="end"
variant="contained"
>
Send
</Button>
<Button
size="small"
color="secondary"
onClick={handleClick}
loading={loading}
loadingPosition="start"
startIcon={<SaveIcon />}
variant="contained"
>
Save
</Button>
</Box>
<Box sx={{ '& > button': { m: 1 } }}>
<Button onClick={handleClick} loading={loading} variant="outlined" disabled>
Disabled
</Button>
<Button
onClick={handleClick}
loading={loading}
loadingIndicator="Loading…"
variant="outlined"
>
Fetch data
</Button>
<Button
onClick={handleClick}
endIcon={<SendIcon />}
loading={loading}
loadingPosition="end"
variant="contained"
>
Send
</Button>
<Button
color="secondary"
onClick={handleClick}
loading={loading}
loadingPosition="start"
startIcon={<SaveIcon />}
variant="contained"
>
Save
</Button>
</Box>
</div>
);
}
:::warning
loading prop이 boolean으로 설정되면 로딩 래퍼가 Google Translation Crash를 방지하기 위해 항상 DOM에 존재하게 돼요.
loading 값은 항상 null 또는 boolean이어야 해요. 아래 패턴은 Google Translation 크래시를 유발할 수 있으므로 권장하지 않아요:
<Button {...(isFetching && { loading: true })}> // ❌ Don't do this
:::
비-네이티브 버튼 렌더링 (Rendering non-native buttons)
nativeButton prop을 사용하면 <div>처럼 상호작용하지 않는 요소를 렌더링하는 component prop에 React 컴포넌트를 전달할 때도 버튼이 키보드 접근성을 유지할 수 있게 해줘요.
const CustomButton = React.forwardRef(function CustomButton(props, ref) {
return <div ref={ref} {...props} />;
})
<Button component={CustomButton} nativeButton={false}>
OK
</Button>
커스터마이즈 (Customization)
여기 컴포넌트를 커스터마이즈하는 몇 가지 예시가 있어요. 이에 대해 더 자세히 알아보려면 오버라이드 문서 페이지를 참고하세요.
import { styled } from '@mui/material/styles';
import Button, { ButtonProps } from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import { purple } from '@mui/material/colors';
const BootstrapButton = styled(Button)({
boxShadow: 'none',
textTransform: 'none',
fontSize: 16,
padding: '6px 12px',
border: '1px solid',
lineHeight: 1.5,
backgroundColor: '#0063cc',
borderColor: '#0063cc',
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
'&:hover': {
backgroundColor: '#0069d9',
borderColor: '#0062cc',
boxShadow: 'none',
},
'&:active': {
boxShadow: 'none',
backgroundColor: '#0062cc',
borderColor: '#005cbf',
},
'&:focus': {
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
},
});
const ColorButton = styled(Button)<ButtonProps>(({ theme }) => ({
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
}));
export default function CustomizedButtons() {
return (
<Stack spacing={2} direction="row">
<ColorButton variant="contained">Custom CSS</ColorButton>
<BootstrapButton variant="contained" disableRipple>
Bootstrap
</BootstrapButton>
</Stack>
);
}
🎨 영감이 필요하다면 MUI Treasury의 커스터마이즈 예제를 확인해 보세요.
복잡한 버튼 (Complex button)
Text 버튼, Contained 버튼, Floating Action 버튼, Icon 버튼은 모두 같은 컴포넌트 위에 만들어져 있어요: 바로 ButtonBase죠.
이 저수준(lower-level) 컴포넌트를 활용해서 커스텀 상호작용을 만들 수 있어요.
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import ButtonBase from '@mui/material/ButtonBase';
import Typography from '@mui/material/Typography';
const images = [
{
url: '/static/images/buttons/breakfast.jpg',
title: 'Breakfast',
width: '40%',
},
{
url: '/static/images/buttons/burgers.jpg',
title: 'Burgers',
width: '30%',
},
{
url: '/static/images/buttons/camera.jpg',
title: 'Camera',
width: '30%',
},
];
const ImageButton = styled(ButtonBase)(({ theme }) => ({
position: 'relative',
height: 200,
[theme.breakpoints.down('sm')]: {
width: '100% !important', // Overrides inline-style
height: 100,
},
'&:hover, &.Mui-focusVisible': {
zIndex: 1,
'& .MuiImageBackdrop-root': {
opacity: 0.15,
},
'& .MuiImageMarked-root': {
opacity: 0,
},
'& .MuiTypography-root': {
border: '4px solid currentColor',
},
},
}));
const ImageSrc = styled('span')({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: 'cover',
backgroundPosition: 'center 40%',
});
const Image = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: theme.palette.common.white,
}));
const ImageBackdrop = styled('span')(({ theme }) => ({
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0.4,
transition: theme.transitions.create('opacity'),
}));
const ImageMarked = styled('span')(({ theme }) => ({
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: 'absolute',
bottom: -2,
left: 'calc(50% - 9px)',
transition: theme.transitions.create('opacity'),
}));
export default function ButtonBaseDemo() {
return (
<Box sx={{ display: 'flex', flexWrap: 'wrap', minWidth: 300, width: '100%' }}>
{images.map((image) => (
<ImageButton
focusRipple
key={image.title}
style={{
width: image.width,
}}
>
<ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
<ImageBackdrop className="MuiImageBackdrop-root" />
<Image>
<Typography
component="span"
variant="subtitle1"
sx={[
{
color: 'inherit',
},
(theme) => ({
position: 'relative',
p: 4,
pt: 2,
pb: `calc(${theme.spacing(1)} + 6px)`,
}),
]}
>
{image.title}
<ImageMarked className="MuiImageMarked-root" />
</Typography>
</Image>
</ImageButton>
))}
</Box>
);
}
서드파티 라우팅 라이브러리 (Third-party routing library)
자주 쓰이는 사용 사례 중 하나는 서버로의 HTTP 왕복(round-trip) 없이 클라이언트에서만 내비게이션을 수행하는 것이에요.
ButtonBase 컴포넌트는 이 사용 사례를 처리하기 위한 component prop을 제공해요.
여기 더 자세한 가이드가 있어요.
제한 사항 (Limitations)
Cursor not-allowed
ButtonBase 컴포넌트는 비활성화된 버튼에 pointer-events: none;을 설정하는데, 이 때문에 비활성화 커서가 나타나지 않아요.
not-allowed를 사용하고 싶다면 두 가지 옵션이 있어요:
- CSS만 사용.
<button>요소의 비활성화 상태에서 pointer-events 스타일을 제거할 수 있어요:
.MuiButtonBase-root:disabled {
cursor: not-allowed;
pointer-events: auto;
}
다만:
- 비활성화된 요소에 tooltip을 표시해야 한다면
pointer-events: none;을 다시 추가해야 해요. - 버튼 요소가 아닌 다른 것을 렌더링하면, 예를 들어 링크
<a>요소라면 커서가 바뀌지 않아요.
- DOM 변경. 버튼을 감쌀 수 있어요:
<span style={{ cursor: 'not-allowed' }}>
<Button component={Link} disabled>
disabled
</Button>
</span>
이 방법은 링크 <a> 요소처럼 어떤 요소든 지원할 수 있다는 장점이 있어요.
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 | Override or extend the styles applied to the component. |
| color | 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string |
'primary' |
No | |
| component | elementType |
- | No | |
| disabled | bool |
false |
No | |
| disableElevation | bool |
false |
No | |
| disableFocusRipple | bool |
false |
No | |
| disableRipple | bool |
false |
No | |
| endIcon | node |
- | No | |
| fullWidth | bool |
false |
No | |
| href | string |
- | No | |
| 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 | The system prop that allows defining system overrides as well as additional CSS styles. |
| variant | 'contained' | 'outlined' | 'text' | string |
'text' |
No |
Note: The
refis forwarded to the root element (HTMLButtonElement).
Any other props supplied will be provided to the root element (ButtonBase).
상속 (Inheritance)
위에서 명시적으로 문서화되지는 않았지만, ButtonBase 컴포넌트의 props도 Button에서 사용할 수 있어요.
테마 기본 props (Theme default props)
테마와 함께 MuiButton을 사용하면 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
규칙 이름 (Rule name)
| Global class | Rule name | Description |
|---|---|---|
| - | colorError | Styles applied to the root element if color="error". |
| - | colorInfo | Styles applied to the root element if color="info". |
| - | colorInherit | Styles applied to the root element if color="inherit". |
| - | colorPrimary | Styles applied to the root element if color="primary". |
| - | colorSecondary | Styles applied to the root element if color="secondary". |
| - | colorSuccess | Styles applied to the root element if color="success". |
| - | colorWarning | Styles applied to the root element if color="warning". |
| - | contained | Styles applied to the root element if variant="contained". |
.Mui-disabled |
- | State class applied to the root element if disabled={true}. |
| - | disableElevation | Styles applied to the root element if disableElevation={true}. |
| - | endIcon | Styles applied to the endIcon element if supplied. |
.Mui-focusVisible |
- | State class applied to the ButtonBase root element if the button is keyboard focused. |
| - | fullWidth | Styles applied to the root element if fullWidth={true}. |
| - | icon | Styles applied to the icon element if supplied |
| - | loading | Styles applied to the root element if loading={true}. |
| - | loadingIconPlaceholder | Styles applied to the loadingIconPlaceholder element. |
| - | loadingIndicator | Styles applied to the loadingIndicator element. |
| - | loadingPositionCenter | Styles applied to the root element if loadingPosition="center". |
| - | loadingPositionEnd | Styles applied to the root element if loadingPosition="end". |
| - | loadingPositionStart | Styles applied to the root element if loadingPosition="start". |
| - | loadingWrapper | Styles applied to the loadingWrapper element. |
| - | outlined | Styles applied to the root element if variant="outlined". |
| - | root | Styles applied to the root element. |
| - | sizeLarge | Styles applied to the root element if size="large". |
| - | sizeMedium | Styles applied to the root element if size="medium". |
| - | sizeSmall | Styles applied to the root element if size="small". |
| - | startIcon | Styles applied to the startIcon element if supplied. |
| - | text | Styles applied to the root element if variant="text". |
소스 코드 (Source code)
이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보는 것을 고려해보세요.
ButtonBase API
데모 (Demos)
이 React 컴포넌트의 사용 예시와 세부 내용은 컴포넌트 데모 페이지에서 확인하세요:
Import
import ButtonBase from '@mui/material/ButtonBase';
// or
import { ButtonBase } from '@mui/material';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| action | ref |
- | No | |
| centerRipple | bool |
false |
No | |
| children | node |
- | No | |
| classes | object |
- | No | Override or extend the styles applied to the component. |
| component | element type |
- | No | |
| disabled | bool |
false |
No | |
| disableRipple | bool |
false |
No | |
| disableTouchRipple | bool |
false |
No | |
| focusRipple | bool |
false |
No | |
| focusVisibleClassName | string |
- | No | |
| LinkComponent | elementType |
'a' |
No | |
| nativeButton | bool |
- | No | |
| onFocusVisible | func |
- | No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| TouchRippleProps | object |
- | No | |
| touchRippleRef | func | { current?: { pulsate: func, start: func, stop: func } } |
- | No | |
| type | string |
'button' |
No |
Note: The
refis forwarded to the root element (HTMLButtonElement).
Any other props supplied will be provided to the root element (native element).
테마 기본 props (Theme default props)
테마와 함께 MuiButtonBase를 사용하면 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
규칙 이름 (Rule name)
| Global class | Rule name | Description |
|---|---|---|
.Mui-disabled |
- | State class applied to the root element if disabled={true}. |
.Mui-focusVisible |
- | State class applied to the root element if keyboard focused. |
| - | root | Styles applied to the root element. |
소스 코드 (Source code)
이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보는 것을 고려해보세요.
IconButton API
데모 (Demos)
이 React 컴포넌트의 사용 예시와 세부 내용은 컴포넌트 데모 페이지에서 확인하세요:
Import
import IconButton from '@mui/material/IconButton';
// or
import { IconButton } from '@mui/material';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node |
- | No | |
| classes | object |
- | No | Override or extend the styles applied to the component. |
| color | 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string |
'default' |
No | |
| disabled | bool |
false |
No | |
| disableFocusRipple | bool |
false |
No | |
| disableRipple | bool |
false |
No | |
| edge | 'end' | 'start' | false |
false |
No | |
| loading | bool |
null |
No | |
| loadingIndicator | node |
<CircularProgress color="inherit" size={16} /> |
No | |
| size | 'small' | 'medium' | 'large' | string |
'medium' |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
Note: The
refis forwarded to the root element (HTMLButtonElement).
Any other props supplied will be provided to the root element (ButtonBase).
상속 (Inheritance)
위에서 명시적으로 문서화되지는 않았지만, ButtonBase 컴포넌트의 props도 IconButton에서 사용할 수 있어요.
테마 기본 props (Theme default props)
테마와 함께 MuiIconButton를 사용하면 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
규칙 이름 (Rule name)
| Global class | Rule name | Description |
|---|---|---|
| - | colorError | Styles applied to the root element if color="error". |
| - | colorInfo | Styles applied to the root element if color="info". |
| - | colorInherit | Styles applied to the root element if color="inherit". |
| - | colorPrimary | Styles applied to the root element if color="primary". |
| - | colorSecondary | Styles applied to the root element if color="secondary". |
| - | colorSuccess | Styles applied to the root element if color="success". |
| - | colorWarning | Styles applied to the root element if color="warning". |
.Mui-disabled |
- | State class applied to the root element if disabled={true}. |
| - | edgeEnd | Styles applied to the root element if edge="end". |
| - | edgeStart | Styles applied to the root element if edge="start". |
| - | loading | Styles applied to the root element if loading={true}. |
| - | loadingIndicator | Styles applied to the loadingIndicator element. |
| - | loadingWrapper | Styles applied to the loadingWrapper element. |
| - | root | Styles applied to the root element. |
| - | sizeLarge | Styles applied to the root element if size="large". |
| - | sizeMedium | Styles applied to the root element if size="medium". |
| - | sizeSmall | Styles applied to the root element if size="small". |
소스 코드 (Source code)
이 페이지에서 원하는 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보는 것을 고려해보세요.