Button

작업을 수행하는데 사용되는 클릭 가능한 요소입니다. 콘텐츠 혹은 화면의 하단 영역에 배치되며 다양한 방식으로 콘텐츠와 함께 상호 작용할 수 있도록 돕습니다.

Design

Web

iOS

Android

@MainActor struct Button

Overview

세 가지 스타일로 제공됩니다:

solid: 색상이 채워진 버튼
outlined: 테두리만 있는 버튼

// 기본 솔리드 버튼
Button(text: "확인", handler: { print("버튼 클릭") })

// 아웃라인 버튼
Button(variant: .outlined, color: .primary, size: .medium, text: "취소")

// 아이콘 버튼
Button(icon: .bell, handler: { print("알림 보기") })

// 로딩 상태 설정
Button(text: "저장")
    .loading(true)

Topics

Initializers

init(variant: Variant, color: Color, size: Size, icon: Icon, handler: (() -> Void)?)

텍스트가 없고 아이콘만 있는 버튼을 생성합니다.

Parameters

Parameter	Description
`variant`	버튼의 스타일, 생략하면 기본값으로 `.solid` 적용
`color`	버튼의 색상 스타일, 생략하면 기본값으로 `.primary` 적용
`size`	버튼의 크기, 생략하면 기본값으로 `.large` 적용
`icon`	버튼에 표시할 아이콘
`handler`	버튼 탭 시 실행할 핸들러

Discussion
```
Button(variant: .solid, icon: .plus, handler: { addItem() })
Button(variant: .outlined, color: .assistive, size: .small, icon: .search)
```

init(variant: Variant, color: Color, size: Size, text: String?, leadingIcon: Icon?, trailingIcon: Icon?, handler: (() -> Void)?)

버튼을 생성합니다.

Parameters

Parameter	Description
`variant`	버튼의 스타일, 생략하면 기본값으로 `.solid` 적용
`color`	버튼의 색상 스타일, 생략하면 기본값으로 `.primary` 적용
`size`	버튼의 크기, 생략하면 기본값으로 `.large` 적용
`text`	버튼에 표시할 텍스트
`leadingIcon`	텍스트 앞에 표시할 아이콘
`trailingIcon`	텍스트 뒤에 표시할 아이콘
`handler`	버튼 탭 시 실행할 핸들러

Discussion
```
Button(variant: .solid, text: "로그인", handler: { loginUser() })
Button(variant: .outlined, color: .assistive, size: .small, text: "확인")
```

Instance Properties

var body: some View

뷰의 내용과 동작을 정의합니다.

Instance Methods

func backgroundColor(SwiftUI.Color?) -> Button

버튼 배경색을 설정합니다.

Parameters

Parameter Description
backgroundColor 설정할 배경색
Return Value

수정된 버튼 인스턴스
Discussion

Solid 스타일 버튼에 가장 효과적으로 적용됩니다.
```
Button(text: "특별 액션")
    .backgroundColor(.blue)
```

Parameter	Description
`backgroundColor`	설정할 배경색

func borderColor(SwiftUI.Color?) -> Button

버튼 테두리 색상을 설정합니다.

Parameters

Parameter Description
borderColor 설정할 테두리 색상
Return Value

수정된 버튼 인스턴스
Discussion

Outlined 스타일 버튼에 가장 효과적으로 적용됩니다.
```
Button(variant: .outlined, text: "경고")
    .borderColor(.red)
```

Parameter	Description
`borderColor`	설정할 테두리 색상

func contentColor(SwiftUI.Color?) -> Button

버튼 콘텐츠(텍스트와 아이콘)의 색상을 설정합니다.

Parameters

Parameter Description
contentColor 설정할 색상
Return Value

수정된 버튼 인스턴스
Discussion
```
Button(variant: .outlined, text: "복사")
    .contentColor(.red)
```

Parameter	Description
`contentColor`	설정할 색상

func disable(Bool) -> Button

버튼을 비활성화 상태로 설정합니다.

Parameters

Parameter Description
disable 비활성화 여부, 생략하면 기본값으로 true 적용
Return Value

수정된 버튼 인스턴스
Discussion

비활성화된 버튼은 시각적으로 흐리게 표시되며 사용자 상호작용에 반응하지 않습니다.
```
Button(text: "저장")
    .disable(isFormInvalid)
```

Parameter	Description
`disable`	비활성화 여부, 생략하면 기본값으로 `true` 적용

func fill(horizontal: Bool, vertical: Bool) -> Button

버튼이 수평 또는 수직 방향으로 공간을 채우도록 설정합니다.

Parameters

Parameter Description
fillHorizontal 수평 방향 채우기 여부, 생략하면 기본값으로 false 적용
fillVertical 수직 방향 채우기 여부, 생략하면 기본값으로 false 적용
Return Value

수정된 버튼 인스턴스
Discussion

버튼의 크기를 조절하여 컨테이너 뷰의 공간을 효율적으로 활용할 때 사용합니다.
```
// 부모 뷰의 가로 너비를 모두 채우는 버튼
Button(text: "전체 확인")
    .fill(horizontal: true)

// 가로, 세로 모두 채우는 버튼
Button(variant: .outlined, text: "영역 전체 채우기")
    .fill(horizontal: true, vertical: true)
```

Parameter	Description
`fillHorizontal`	수평 방향 채우기 여부, 생략하면 기본값으로 `false` 적용
`fillVertical`	수직 방향 채우기 여부, 생략하면 기본값으로 `false` 적용

func fontVariant(Typography.Variant?) -> Button

버튼 텍스트의 폰트 변형을 설정합니다.

Parameters

Parameter Description
fontVariant 설정할 폰트 변형
Return Value

수정된 버튼 인스턴스
Discussion

텍스트의 크기와 스타일을 변경할 때 사용합니다.
```
TextButton(text: "중요 안내")
    .fontVariant(.heading)
```

Parameter	Description
`fontVariant`	설정할 폰트 변형

func fontWeight(Typography.Weight?) -> Button

버튼 텍스트의 폰트 두께를 설정합니다.

Parameters

Parameter Description
fontWeight 설정할 폰트 두께
Return Value

수정된 버튼 인스턴스
Discussion

텍스트의 강조를 조절할 때 사용합니다.
```
TextButton(text: "중요 공지")
    .fontWeight(.bold)
```

Parameter	Description
`fontWeight`	설정할 폰트 두께

func loading(Bool) -> Button

버튼을 로딩 상태로 설정합니다.

Parameters

Parameter Description
loading 로딩 상태 여부, 생략하면 기본값으로 true 적용
Return Value

수정된 버튼 인스턴스
Discussion

로딩 상태인 버튼은 내부 콘텐츠 대신 로딩 인디케이터를 표시하며 사용자 상호작용에 반응하지 않습니다. 비동기 작업이 진행 중일 때 사용자에게 피드백을 제공하는 데 유용합니다.
```
Button(text: "저장")
    .loading(isLoading)
```

Parameter	Description
`loading`	로딩 상태 여부, 생략하면 기본값으로 `true` 적용

Enumerations

enum Color

버튼의 색상 스타일을 정의합니다.

Enumeration Cases

case assistive

보조 스타일 - 덜 중요한 액션에 사용

case primary

기본 강조 스타일 - 주요 액션에 사용

Initializers

init?(rawValue: String)

enum Size

버튼의 크기를 정의합니다.

Enumeration Cases

case large

큰 크기

case medium

중간 크기

case small

작은 크기

Initializers

init?(rawValue: String)

enum Variant

버튼의 변형을 정의합니다.

Enumeration Cases

case outlined

테두리가 있는 형태 - 최소한의 강조가 필요한 액션에 사용

case solid

배경 색상이 채워진 형태 - 주요 액션에 사용

Initializers

init?(rawValue: String)

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View