MUI - Button

Button

Button이란 버튼 태그에 다양한 스타일과 기능을 추가해서 클릭 가능한 액션을 표현해준다.

버튼의 모양, 동작 및 스타일을 속성을 통해 제어할 수 있다.

기본적으로 버튼 클릭할 때 ripple(물방울 퍼지듯이)스타일이 들어가있다.

 

import { Button, Stack } from "@mui/material";

function Mui() {
    return (
        <div>
            <Stack spacing={2} direction="row"> // mui 의 Stack 태그
                <Button variant="text">Text</Button> // mui 의 Button 태그
                <Button variant="contained">Contained</Button> // variant값에 따라 배경색을 추가
                <Button variant="outlined">Outlined</Button> // variant값에 따라 테두리를 추가
            </Stack>
        </div>
    );
}

export default Mui;

 

Button 태그와 Stack 태그를 import 해서 사용한다.

variant의 값에 따라 버튼스타일을 설정 할 수 있다.

 

 

728x90

 

 

 

variant뿐만 아니라 속성을 추가하여 버튼스타일 및 기능을 설정할 수 있다.

<Stack direction="row" spacing={2}>
    <Button>Primary</Button> // 기본 버튼
    <Button disabled>Disabled</Button> // 클릭 불가능 
    <Button href="#text-buttons">Link</Button> // href 설정 버튼
    <Button variant="outlined">Primary</Button> // 테두리있는 버튼
    <Button variant="contained">Contained</Button> // 배경색있는 버튼
    <Button color="secondary">Secondary</Button> // secondary 색 버튼
	<Button variant="contained" color="success">Success</Button> // success 색 버튼
	<Button variant="outlined" color="error">Error</Button> // error 색 버튼
    <Button variant="outlined" size="small">Small</Button> // small 사이즈 버튼
    <Button variant="outlined" size="medium">Medium</Button> // medium 사이즈 버튼
    <Button variant="outlined" size="large">Large</Button> /// large 사이즈 버튼
</Stack>

 

 

반응형

 

 

그 외 버튼을 통해 파일불러오기, 아이콘 추가 및 로딩 기능을 아래 사이트에서 구현할 수 있다.

https://mui.com/material-ui/react-button/