LogoCoUI

Button

다양한 변형과 크기를 지원하는 버튼 컴포넌트

Button#

사용자 인터랙션을 위한 기본 버튼 컴포넌트입니다. Primary, secondary, ghost, outline 변형을 지원합니다.

사용법#

// 기본 버튼
CouiButton(
  onPressed: handleSubmit,
  child: Text('제출'),
)

// 변형 지정
CouiButton.primary(
  onPressed: handleSave,
  child: Text('저장'),
)

CouiButton.outline(
  onPressed: handleCancel,
  child: Text('취소'),
)

// 비활성화
CouiButton(
  onPressed: null,
  child: Text('비활성화'),
)
Button(
  onClick: handleSubmit,
  child: Text('제출'),
)

Button(
  variant: ButtonVariant.outline,
  onClick: handleCancel,
  child: Text('취소'),
)

Props / Parameters#

속성타입기본값설명
onPressed VoidCallback? null 클릭 핸들러. null이면 비활성화
variant ButtonVariant primary 버튼 변형 스타일
sizeButtonSizemedium버튼 크기
isLoading bool false 로딩 상태 표시
childWidget필수버튼 내용

변형 (Variants)#

Primary#

가장 강조되는 주요 액션에 사용합니다.

CouiButton.primary(onPressed: handleAction, child: Text('Primary'))

Secondary#

보조 액션에 사용합니다.

CouiButton.secondary(onPressed: handleAction, child: Text('Secondary'))

Ghost#

배경 없이 텍스트만 표시합니다. 덜 중요한 액션에 적합합니다.

CouiButton.ghost(onPressed: handleAction, child: Text('Ghost'))

Outline#

테두리만 있는 버튼입니다.

CouiButton.outline(onPressed: handleAction, child: Text('Outline'))

크기 (Sizes)#

크기높이
SmallButtonSize.sm32px
MediumButtonSize.md40px
LargeButtonSize.lg48px
CouiButton(
  size: ButtonSize.sm,
  onPressed: handleAction,
  child: Text('작은 버튼'),
)