SwiftSwiftUISnippetApple
Last updated at 2023-08-29

Built-in Button Style Example in SwiftUI

ClickUp
Note
AI Status
Last Edit By
Last edited time
Aug 29, 2023 03:31 AM
Metatag
Slug
button-style-example-in-swiftui
Writer
Published
Published
Date
Jul 18, 2023
Category
Swift
SwiftUI
Snippet
Apple
A button plays a vital role in an application. It has an action that results in a different path for the application user, changes the application state, and so on.
Different button goals usually have different button styles. For example, if the application prefers the user to tap a button rather than ignore it, the button should be highlighted with a primary color. If the application prefers the user to avoid a button, it should be colored red.
In this tutorial, you will learn how to style a button so you can apply your use case to your application.

How Many Built-in Button Styles are in SwiftUI?

As of Xcode 14, there are seven built-in button styles that you can use on iOS, macOS, or tvOS.
These button styles are not mutually exclusive, which means you can use them on all platforms, or some button styles are just available on one platform.
The button styles are:
  1. automatic button style
  1. bordered button style
  1. borderedProminent button style
  1. borderless button style
  1. card button style
  1. link button style
  1. plain button style
These button styles are available to use by passing a static variable to the .buttonStyle modifier in your SwiftUI button.
Button("My Button") {
   print("You tap my button")
}.buttonStyle(.card)

What is the Default Button Style?

The default button style is .automatic. So if you write simple code like below, it uses .automatic button style automatically
Button("Hello World") {
	
}
By automatically, it means SwiftUI will choose the appropriate button style for the respective platform.
Below is the screenshoot if you use the default button style in iOS:
Below is the screenshoot if you use the default button style in macOS:
🚩
A Special Invitation for Mozzlog Reader Thanks for Stopping By! đŸ€  There are many side projects that Mozzlog team is currently working on. Go and check if one of them benefits your daily development activities. 🙌 Or you can Join The Waitlist to get seat for upcoming premium features*. đŸ€© See the projects today! https://mozzlog.com/projects 🚀

How to Change Button Style?

You can use .buttonStyle modifier that is available in all View. If you use this modifier to specific button style instance, it will only be applied to that instance.
In this code you will use the .bordered button style for our Login button.
Button("Login") {
}
.buttonStyle(.bordered)
If you use .buttonStyle on a container, the button style will be applied to every Button children
VStack {
	Button("Bordered Button 1") {
	}
	Button("Bordered Button 2") {
	}
}
.buttonStyle(.bordered)

Take a Look to The Built-in Button Styles

.automatic button style example

The default button style, based on the button’s context. When you don’t apply any button style, this is the default to use.

.bordered button style

A button style that applies standard border artwork based on the button’s context.

.borderedProminent button style example

A button style that applies standard border prominent artwork based on the button’s context.

.borderless button style example

A button style that doesn’t apply a border. This is also default button style when you use .automatic

.card button style example (tvOS)

A button style that doesn’t pad the content, and applies a motion effect when a button has focus. This button style available on tvOS

.link button style example (macOS)

A button style for buttons that emulate links. This button style available on macOS

.plain button style example

A button style that doesn’t style or decorate its content while idle, but may apply a visual effect to indicate the pressed, focused, or enabled state of the button.

Conclusion

Using custom border style for a button is super easy in SwiftUI. You can apply the style to a specific button or to multiple button at once. Using .automatic will use the .borderless style, the other style allows you to style the button design with much more freedom.

Discussion (0)

Related Posts