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 |
버튼 변형 스타일 |
size | ButtonSize | medium | 버튼 크기 |
isLoading |
bool |
false |
로딩 상태 표시 |
child | Widget | 필수 | 버튼 내용 |
변형 (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)#
| 크기 | 값 | 높이 |
|---|---|---|
| Small | ButtonSize.sm | 32px |
| Medium | ButtonSize.md | 40px |
| Large | ButtonSize.lg | 48px |
CouiButton(
size: ButtonSize.sm,
onPressed: handleAction,
child: Text('작은 버튼'),
)