Button
가장 기본적으로 쓰이는 박스 형태의 버튼입니다.Anatomy
버튼을 구성하는 요소를 설명합니다.
Rules of Use
Loading
버튼 내에서 스피너를 사용하여 현재 작업이 처리중이거나 발생하고 있음을 나타냅니다.
Dropdown Toggle
버튼에 dropdown toggle 속성을 추가해 사용할 수 있습니다. 속성 추가 시 버튼 우측에 Chevron이 보여집니다.
Disabled
정보 입력 전에는 비활성화 상태이며 정보가 입력된 후부터 버튼이 활성 상태로 전환됩니다.
Hierarchy
복수개의 버튼을 동일한 위계로 제공하는 경우 Primary 버튼은 그 중 가장 주요한 버튼에만 사용하는 것을 권장합니다.
Icon Only
Icon only Button은 width와 height를 동일하게 사용하는 것을 권장합니다. 개발 상 텍스트 버튼과 동일하게 패딩이 지정되어 있어 Icon only button 사용 시 정사각 형태로 보여주기 위해 Fixed width로 값을 지정해 사용합니다. dropdown toggle로 사용할 경우에는 Fixed width를 Hug contents로 변경하여 사용합니다.
Import
import { Button } from '@goorm-dev/vapor-components';Examples
Props
| name | description | default |
|---|---|---|
| color | color primarysecondarysuccesswarningdangercontrast | primary |
| size | button size xllgmdsm | md |
| active | bool | |
| aria-label | string | |
| block | display 속성을 block 설정 | |
| disabled | 버튼 클릭 제한. true 이면 클릭이 되지 않으면 반투명 처리 | |
| outline | 색상 표시 영역을 밖으로 할지 지정. boolean | |
| tag | 렌더링할 컴포넌트 태그를 변경 stringfunction | button |
| innerRef | 돔 접근 레퍼런스 | |
| onClick | 버튼 클릭 이벤트 | |
| children | 리액트 컴포넌트 노드 | |
| className | 버튼 클래스 | |
| cssModule | props에 따라 지정되는 기본 클래스를 따로 변경할 때 사용 object | |
| close | X 아이콘이 포함된 버튼 출력 boolean | |
| icon | GDS 아이콘 컴포넌트 | |
| iconSide | 아이콘 위치를 지정. `icon`이 지정되어야만 동작. leftright | left |