🎨 BrandUIKit
Buttons
import BrandUIKit

Button

BrandUIKit comes included with two of the most used Button Types: Primary and Secondary Buttons.

These Buttons will be styled according to the Accent Color of the App. (Learn more about that in Get Started)

Primary Button (CTA Button)

.buttonStyle(CTAButton())

This button style should be used to symbolize the primary action for the view shown. You can pass role: .destructive or role: .cancel to style it accordingly.

It is recommended to have no more than one Primary Button per view.

CTA Buttons

VStack (spacing: 20) {
    VStack {
        Button(action: {}, label: {
            Text("CTA Button")
        })
        .buttonStyle(CTAButton())
 
        Button(role: .destructive, action: {}, label: {
            Text("Destructive CTA Button")
        })
        .buttonStyle(CTAButton())
    }
}

Secondary Button

.buttonStyle(SecondaryButton())

This button style should be used to symbolize secondary actions for the view shown. You can pass role: .destructive or role: .cancel to style it accordingly.

CTA Buttons

VStack (spacing: 20) {
    VStack {
        Button(action: {}, label: {
            Text("Secondary Button")
        })
        .buttonStyle(SecondaryButton())
 
        Button(role: .destructive, action: {}, label: {
            Text("Destructive Secondary Button")
        })
        .buttonStyle(SecondaryButton())
    }
}

Examples

CTA and Secondary Buttons Example

Get StartedTextField