Button
Button
아래 코드로 버튼을 사용해보세요.
가져오기import{ Button }from"antd"; |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
버튼은 작업(또는 일련의 작업들)을 의미합니다. 버튼을 클릭하면 해당 비지니스 로직이 실행됩니다.
Ant Design에서는 5가지 유형의 버튼을 제공합니다.
추가적으로 4가지 속성이 더 있습니다:
danger: 삭제나 권한 부여와 같은 위험한 작업에 사용됩니다.ghost: 복잡한 배경에서 사용되며, 주로 홈 화면에서 사용됩니다.disabled: 액션을 허락되지 않을 때 사용됩니다.loading: 버튼에 로딩 스피너를 추가하여 여러 번 제출하는 것을 방지합니다.공통 속성 참조：Common props
다양한 버튼 스타일은 버튼 속성을 설정함으로써 생성할 수 있습니다. 추천하는 순서는: type -> shape -> size -> loading -> disabled 입니다.
| 속성 | 설명 | 유형 | 기본값 | 버전 |
|---|---|---|---|---|
| autoInsertSpace | 기본적으로 두 개의 글자 사이에 공백을 추가하지만, autoInsertSpace 를 false로 설정하면 이 공백을 제거할 수 있습니다. | boolean | true | 5.17.0 |
| block | 버튼 너비를 부모 요소의 너비에 맞추는 옵션 | boolean | false | |
| classNames | Semantic DOM 클래스 | Record<SemanticDOM, string> | - | 5.4.0 |
| danger | 버튼을 danger status로 설정합니다. | boolean | false | |
| disabled | 버튼을 비활성화 합니다. | boolean | false | |
| ghost | 배경을 투명하게 만들고 텍스트와 테두리 색상을 반전시킵니다. | boolean | false | |
| href | 링크 버튼의 리디렉션 URL 설정 | string | - | |
| htmlType | button의 원래 HTML type 설정, 참고: MDN | string | button | |
| icon | 버튼의 아이콘 컴포넌트 설정 | ReactNode | - | |
| iconPosition | 버튼의 아이콘 위치 설정 | start | end | start | 5.17.0 |
| loading | 버튼의 로딩 상태 설정 | boolean | { delay: number } | false | |
| shape | 버튼 모양을 설정할 수 있습니다. | default | circle | round | default | |
| size | 버튼의 사이즈 설정 | large | middle | small | middle | |
| styles | Semantic DOM 스타일 | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
| target | 링크의 target 속성과 동일하며, href가 지정된 경우에 작동합니다. | string | - | |
| type | 버튼 타입 설정 | primary | dashed | link | text | default | default | |
| onClick | click 이벤트를 처리할 핸들러를 설정합니다. | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
네이티브 버튼이 지원하는 모든 속성을 받아들입니다.
| 토큰 이름 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| borderColorDisabled | 비활성화 상태 버튼의 테두리 색상 | string | #d9d9d9 |
| contentFontSize | 버튼 내용의 글꼴 크기 | number | 14 |
| contentFontSizeLG | large 버튼 내용의 글꼴 크기 | number | 16 |
| contentFontSizeSM | small 버튼 내용의 글꼴 크기 | number | 14 |
| contentLineHeight | 버튼 내용의 줄 높이 | number | 1.5714285714285714 |
| contentLineHeightLG | large 버튼 내용의 줄 높이 | number | 1.5 |
| contentLineHeightSM | small 버튼 내용의 줄 높이 | number | 1.5714285714285714 |
| dangerColor | danger 버튼의 글씨 색상 | string | #fff |
| dangerShadow | danger 버튼의 그림자 | string | 0 2px 0 rgba(255, 38, 5, 0.06) |
| defaultActiveBg | 활성 상태일 때 기본 버튼의 배경 색상 | string | #ffffff |
| defaultActiveBorderColor | 활성 상태일 때 기본 버튼의 테두리 색상 | string | #0958d9 |
| defaultActiveColor | 활성 상태일 때 기본 버튼의 글자 색상 | string | #0958d9 |
| defaultBg | 기본 버튼의 배경 색상 | string | #ffffff |
| defaultBorderColor | 기본 버튼의 테두리 색상 | string | #d9d9d9 |
| defaultColor | 기본 버튼의 글자 색상 | string | rgba(0, 0, 0, 0.88) |
| defaultGhostBorderColor | 기본적인 ghost 버튼의 테두리 색상 | string | #ffffff |
| defaultGhostColor | 기본적인 ghost 버튼의 글자 색상 | string | #ffffff |
| defaultHoverBg | 기본 버튼에 hover 했을 때 배경 색상 | string | #ffffff |
| defaultHoverBorderColor | 기본 버튼에 hover 했을 때 테두리 색상 | string | #4096ff |
| defaultHoverColor | 기본 버튼에 hover 했을 때 글자 색상 | string | #4096ff |
| defaultShadow | 기본 버튼의 그림자 | string | 0 2px 0 rgba(0, 0, 0, 0.02) |
| fontWeight | 글꼴 굵기 | undefined | FontWeight | 400 |
| ghostBg | 기본적인 ghost 버튼의 배경 색상 | string | transparent |
| groupBorderColor | 버튼 그룹의 테두리 색상 | string | #4096ff |
| linkHoverBg | 링크 버튼에 hover 했을 때 배경 색상 | string | transparent |
| onlyIconSize | 아이콘만 포함된 버튼의 아이콘 크기 | number | 16 |
| onlyIconSizeLG | 아이콘만 포함된 large 버튼의 아이콘 크기 | number | 18 |
| onlyIconSizeSM | 아이콘만 포함된 small 버튼의 아이콘 크기 | number | 14 |
| paddingBlock | 버튼의 수직 패딩 | undefined | PaddingBlock<string | number> | 4 |
| paddingBlockLG | large 버튼의 수직 패딩 | undefined | PaddingBlock<string | number> | 7 |
| paddingBlockSM | small 버튼의 수직 패딩 | undefined | PaddingBlock<string | number> | 0 |
| paddingInline | 버튼의 수평 패딩 | undefined | PaddingInline<string | number> | 15 |
| paddingInlineLG | large 버튼의 수평 패딩 | undefined | PaddingInline<string | number> | 15 |
| paddingInlineSM | small 버튼의 수평 패딩 | undefined | PaddingInline<string | number> | 7 |
| primaryColor | primary 버튼의 글자 색상 | string | #fff |
| primaryShadow | primary 버튼의 그림자 | string | 0 2px 0 rgba(5, 145, 255, 0.1) |
| solidTextColor | solid 버튼의 기본 글자 색상 | string | #fff |
| textHoverBg | 글씨 버튼에 hover 했을 때 배경 색상 | string | rgba(0, 0, 0, 0.06) |
| textTextActiveColor | 활성 상태의 텍스트 버튼 기본 텍스트 색상 | string | rgba(0, 0, 0, 0.88) |
| textTextColor | 글씨 버튼의 기본 글씨 색상 | string | rgba(0, 0, 0, 0.88) |
| textTextHoverColor | 글씨 버튼에 hover했을 때 기본 텍스트 색상 | string | rgba(0, 0, 0, 0.88) |
유형(type)은 본질적으로 색상(color)과 변형(variant)에 대한 추가(syntactic sugar)된 문법입니다. 내부적으로 유형에 대해 색상과 변형 간의 매핑 관계를 설정합니다. 두 가지가 동시에 존재하는 경우, 색상과 변형이 우선적으로 사용됩니다.
<Button type="primary">click</Button>
아래와도 똑같습니다.
<Button color="primary" variant="solid">click</Button>
이 기능이 필요하지 않다면, ConfigProvider에서 wave의 disabled을 true로 설정할 수 있습니다.
<ConfigProvider wave={{ disabled: true }}><Button>click</Button></ConfigProvider>
