button 요소는 padding: 12px 20px의 여백을 가지고 solid한 배경색을 가진 디자인 혹은 outline을 가진 투명한 디자인으로 가장 많이 재사용됩니다. 그 외에 배경색이나 outline 없이 text만 있는 버튼이나 아이콘만 있는 버튼이 사용되고 있습니다.
usage
Button 컴포넌트를 사용할 때는variation 속성을 반드시 입력합니다. solid 타입인 경우 colors 객체에 bg와 text 모두 값이 존재해야하고 그 외에는 bg 값만 전달하여 사용합니다.
solid, text type 버튼은 텍스트 라벨과 아이콘이 함께 사용되는 경우가 있어 children에 아이콘을 함께 전달할 수도 있겠지만 startIcon 혹은 endIcon 속성으로 아이콘 컴포넌트를 전달하여 사용합니다.
callmebyneon
commented
6 days ago
Atoms/Form/Button.tsx
design type
padding: 12px 20px의 여백을 가지고 solid한 배경색을 가진 디자인 혹은 outline을 가진 투명한 디자인으로 가장 많이 재사용됩니다. 그 외에 배경색이나 outline 없이 text만 있는 버튼이나 아이콘만 있는 버튼이 사용되고 있습니다.usage