Button 버튼

버튼은 즉각적인 동작을 시작할 때 사용해요.

출처: 문서

본문

언제 사용하나요

하나의(또는 한 묶음의) 동작 명령을 표시해서, 사용자의 클릭에 반응하고 대응하는 비즈니스 로직을 트리거해요.

형태

:::demo variant로 버튼 형태를 설정해요. 현재 solid, outline, text 세 가지 형태를 지원하고, 기본값은 outline이에요.

button/shape

:::

테마 색

:::demo color로 버튼의 테마 색을 설정해요. 현재 primary, secondary, danger 세 가지 테마 색을 지원하고, 기본값은 secondary예요.
주의: variant를 solid로 설정하면 기본으로 primary 테마 색을 사용해요.

button/theme

:::

크기

:::demo size로 버튼 크기를 설정해요. sm, md, lg 세 가지 크기를 지원하고, 기본값은 md예요.

button/size

:::

비활성 상태

:::demo disabled 파라미터로 버튼의 비활성 상태를 설정해요.

button/disable

:::

로딩 중 상태

:::demo loading 파라미터로 버튼의 로딩 중 상태를 설정해요.

button/loading

:::

아이콘 버튼

:::demo

button/icon

:::

버튼 그룹

여러 버튼을 한 그룹으로 버튼 그룹 컨테이너에 넣어요. 버튼 그룹은 size로 크기를 정할 수 있고, 드롭다운 메뉴와 함께 섞어 쓸 수도 있어요.

:::demo

button/buttonGroup

:::

Button 파라미터

파라미터	타입	기본값	설명	Demo 링크
variant	IButtonVariant	'outline'	선택, 버튼 형태	형태
color	IButtonColor	'secondary'	선택, 버튼 테마	테마 색상
size	IButtonSize	'md'	선택, 버튼 크기	크기
icon	string	--	선택, 버튼 아이콘 커스텀	아이콘 버튼
shape	IButtonShape	--	선택, 버튼 모양(원형/라운드)	아이콘 버튼
disabled	boolean	false	선택, button 비활성화 여부	비활성화 상태
loading	boolean	false	선택, 로딩 중 상태 설정	로딩 중 상태
native-type	IButtonType	'button'	선택, 버튼 네이티브 type 속성

Button 타입 정의

IButtonVariant

type IButtonVariant = 'solid' | 'outline' | 'text';

IButtonSize

type IButtonSize = 'lg' | 'md' | 'sm';

IButtonColor

type IButtonColor = 'primary' | 'secondary' | 'danger';

IButtonShape

type IButtonShape = 'circle' | 'round';

IButtonType

type IButtonType = 'button' | 'submit' | 'reset';

ButtonGroup 파라미터

파라미터	타입	기본값	설명	Demo 링크
size	IButtonSize	'md'	선택, 버튼 그룹 크기	버튼 그룹

ButtonGroup 타입 정의

IButtonGroupSize

type IButtonGroupSize = 'lg' | 'md' | 'sm';

더 알아보기 (Learn more)

variant·color·size 세 축으로 버튼의 모양을 조합하고, disabled와 loading 상태도 간단히 붙일 수 있어요. 버튼 그룹은 size로 통일된 크기를 주고 드롭다운과도 함께 쓸 수 있어요.