Button Styles (.cta() and .secondary())

Buttons, buttons, buttons... No app can be complete without them. After building a dozen of apps in the past, we have concluded that there are two most commonly used buttons in any app:

• Buttons that are meant to stand out and grab the user's attention. ("Click me!")
• Buttons that are meant to be secondary and blend more with the background.

As most of the time you're at least going to need these types of buttons in your app, SwiftyLaunch includes them as ButtonStyles to easily apply within your app.

Call-To-Action / Primary Button Style

For buttons that need to grab user's attention, you can use the .cta() button style.

This will fill the button with your app's accent color and fill the full view width of the parent container.

Button Style Definition

extension ButtonStyle where Self == CTAButtonStyle {
	public static func cta() -> Self {
		CTAButtonStyle()
	}
}

Usage Example

Simply pass .cta() to the .buttonStyle() modifier of your button to make it a CTA button.

Button("Click Me") { /* Action */ }
    .buttonStyle(.cta())

Destructive

Do indicate destructive actions, a red color is usually preferred. To override the CTA's button color (app's accent color) with red, simply set the button's role to destructive.

Button("Delete", role: .destructive) { /* Destructive Action */ }
    .buttonStyle(.cta())

Secondary Button Style

For buttons that the user is supposed to be "less tempted" to press, use the .secondary() button style.

This will fill the button with your .quinary color (opens in a new tab), set its text color to your app's accent color and fill the full view width of the parent container.

Button Style Definition

extension ButtonStyle where Self == SecondaryButtonStyle {
	public static func secondary() -> Self {
		SecondaryButtonStyle()
	}
}

Usage Example

Simply pass .secondary() to the .buttonStyle() modifier of your button to make it a secondary button.

Button("Secondary Button") { /* Action */ }
    .buttonStyle(.secondary())

Destructive

Do indicate destructive actions, a red color is usually preferred. To override the Secondary's button text color (app's accent color) with red, simply set the button's role to destructive.

Button("Confirm Deletion", role: .destructive) { /* Destructive Action */ }
    .buttonStyle(.secondary())

Styling

You can additionally change the default height, radius and font of the the button styles by editing the constants values on top of the Button.swift file.

let commonButtonRadius = 10.0
let commonButtonHeight = 50.0
let commonButtonFontStyle: Font = .system(.title3, weight: .semibold)

Examples in the App

Here you can see how the .cta() and .secondary() button styles are used in the app generated by SwiftyLaunch out of the box.