5 SwiftUI Button Designs Every SwiftUI Developer Should Know
October 18, 2019


SwiftUI gives you a variety of creative ways to create your buttons. Let's take a look at five that every SwiftUI Developer should know.

I'll also show you a bonus one design if you want to get extra fancy. πŸ˜ƒ

Here are the buttons:


The Classic

Don't underestimate the power of the classic. It's simple and it immediately communicates to your users, "Hey, you can tap me and something will happen." That is when it has your apps accent color applied to it. 

In this example, I'm using the gold color as my accent color. This remains consistent among all my buttons here.

Button("The Classic", action: {}) 

I'll also show you in the next post how the classic can be used in combination with other buttons effectively.


The Solid

The solid is a real attention-getter among your other buttons. You can use this style to make your buttons stand out among your other buttons. This style says, "Hey, I'm the obvious or recommended choice here. Tap me!"

Button(action: {}) {
    Text("The Solid")
        .foregroundColor(Color("ColorBackground"))
        .padding()
}
.background(RoundedRectangle(cornerRadius: 10   , style: .continuous))


The Outline

This style has a refined look that doesn't stand out as much as the solid but still says, "Hey, I'm an option or your second choice if you don't like the primary option."

It can also be used when you don't want to pull attention away from the main content on your screen. It's more subtle than The Solid.

Button(action: {}) { 
    Text("The Outline") 
        .padding() 

.background(Capsule().stroke(lineWidth: 2)) 


The Image & Text

Images can go a long way helping your audience understand what the button means. This style can be combined with the other styles to help users better understand the purpose of the button.

Button(action: {}) {
    Image(systemName: "hand.thumbsup.fill")
    Text("The Image & Text")
}


The Translucent Background

"Translucent" means to allow some light to pass through (trans: through, lucent: to shine) but not all the details of what is below it.

This is a great option when using buttons on top of images or videos. It prevents the button from getting lost in the content.

Button(action: {}) {
    Text("The Translucent Background")
        .padding()
}
.background(RoundedRectangle(cornerRadius: 15)
    .opacity(0.2))

Note: Be sure to apply the opacity to the rounded rectangle, NOT the whole button.


// BONUS!

I wouldn't consider this next button as something every SwiftUI developer would have to know. But it is something you can play with and to produce just the right customized look for your app.

The Gradient

Now, this button says, "The developer took extra care to provide you with something a special."
Don't go crazy with this one. It's easy to take it too far. In the screenshot above I show a thicker border so you can more easily see it but I would actually go a little thinner, like 2 points.



Define your gradient to use in your view but outside the body:
let gradient = LinearGradient(gradient: Gradient(colors: [Color("ColorDarkAccent"), Color("ColorLightAccent")]), startPoint: .topLeading, endPoint: .bottomTrailing)

Then in your body:
Button(action: {}) {
    Text("The Gradient")
        .padding()
}
.background(Capsule()
    .stroke(gradient, lineWidth: 2)
    .saturation(1.8))

Saturation? What?
The colors in my color scheme are more muted, dull. I apply a little saturation to make the colors noticeable.


Where is the accent color?

You may have noticed that I'm not directly applying an accent color to every button. Instead, I'm applying the accent color to the top-level parent view. Any child view that uses accent colors will take on this property.


Now it's your turn! 

Your mission, should you choose to accept it, is to combine two of the styles above and post it on Twitter. Tag me @BigMtnStudio so I can retweet it and show it off to everyone. πŸ˜ƒ


SwiftUI Views Book πŸ“™

The book, SwiftUI Views, is your comprehensive visual reference guide that covers even more variations that can be applied to buttons. Use the book to get creative and really mix things up!

Tip: Check out the chapter on Effect Modifiers to get really creative. πŸ˜‰

Want to create your own custom button style to use throughout your app?
I got you covered! Check out the chapter on "CUSTOM STYLING" and the section on Button Styles within.
2 comments
Write a comment...
Michele Galvagno

Where can we find a list of all those strings that define Colors?
Also, in this example there is no setup part, such as enclosing it into a VStack, setting the top label and the accent color.
Is it in the book (which I have)?

Thanks!

Mark Moeykens

Hi Michele, these button styles are in the book but using different colors than what you see here. You can use any color you want. The important thing is how to put them together. Once you know how to create them you can apply any color you want. In this case, I'm using named colors defined in the Assets.xcassets folder.

Explorer

Free
Gain exclusive access to Big Mountain Studio 
  • News
  • Tutorials
  • Updates, etc.
When signed up, you get posts delivered right to your Inbox!
Includes access to 1 product:
Get access