[UI] Button Component

[KoreaMango]

Button Component Guide

// 기본 large 버튼 사용
DefaultButton(
                buttonSize: .large,
                buttonStyle: .filled,
                buttonColor: .mainPurple,
                isIndicate: false,
                action: {
                    print("HI")
                },
                content: {
                    Text("Button")
                }
            )

// 커스텀 버튼 사용
DefaultButton(
                buttonSize: .small,
                width: 300,
                height: 35,
                buttonStyle: .filled,
                buttonColor: .mainPurple,
                isIndicate: false,
                action: {
                    print("HI")
                },
                content: {
                    Text("Button")
                }
            )

ButtonSize

• .small : 작은 버튼
• .large : 큰 버튼

Width? (옵셔널)

매개변수를 넣어서 커스텀 가능

• large인 경우 기본 값: 300
• small인 경우 기본 값 : 85

Height? (옵셔널)

매개변수를 넣어서 커스텀 가능

• large인 경우 기본 값: 30
• small인 경우 기본 값: 35

ButtonStyle

• .filled : 채워져 있음
• .unFilled : 안채워져있음

ButtonColor

• mainPurple : 앱에서 사용하는 메인 보라색
• mainPurpleLight : 앱에서 사용하는 메인 라일락색
• grayDisabled : 앱에서 사용하는 Disable용 회색
• mainBlue : 앱에서 사용하는 메인 파란색

isIndicate

• true : 우측에 화살표 Label이 추가됨
• False : 우측에 화살표 Label이 사라짐

Action

버튼을 클릭했을 때 작동되는 액션 클로져

Content

• 버튼 안에 들어갈 버튼 내용
• 주로 Text(””)를 사용하면 됨