width
: 버튼의 너비 (기본값: 550
)heigth
: 버튼의 높이 (기본값: 56
)backgroundColor
: 버튼의 배경색 (기본값: #FFD039
)fontColor
: 버튼의 글자색 (기본값: white
)fontSize
: 버튼의 글자 크기 (기본값: 16px
)<Button>기본버튼</Button>
<Button
width={550}
height='56px'
backgroundColor={yellow}
fontColor={#fff}
fontSize={16}>
커스텀버튼
</Button>
const buttonStyle = {
width: '550px',
height: 56,
backgroundColor= 'rgba(233, 53, 80, 1)',
fontColor: 'red',
fontSize: '16px'
}
<Button {...buttonStyle}>커스텀버튼</Button>
width
값에 따라 border-radius
값이 정해지도록 구현이 되어있습니다.
width
≥ 250px
→ border-radius=16px