| < How to disable the overlay color for images inside Button and NavigationLink | How to group views together with ControlGroup > |
How to get bordered buttons that stand out
Updated for Xcode 14.2
New in iOS 15
SwiftUI has a dedicated .bordered button style that mimics a common look and feel used across many of Apple’s apps. In its most basic form it looks like this:
Button("Buy: $0.99") {
print("Buying…")
}
.buttonStyle(.bordered)
Download this as an Xcode project
However, for buttons that should really stand out on the screen, you are likely to want to use the borderedProminent option to make their color much stronger:
Button("Buy: $0.99") {
print("Buying for $0.99")
}
.buttonStyle(.borderedProminent) Download this as an Xcode project
Important: Having lots of prominent buttons is not good UI practice.
You can customize the color of these buttons either by using tint():
Button("Submit") {
print("Submitting…")
}
.tint(.indigo)
.buttonStyle(.borderedProminent) Download this as an Xcode project
Or by attaching a role to the button:
Button("Delete", role: .destructive) {
print("Deleting…")
}
.buttonStyle(.borderedProminent) Download this as an Xcode project
SPONSORED Build a functional Twitter clone using APIs and SwiftUI with Stream's 7-part tutorial series. In just four days, learn how to create your own Twitter using Stream Chat, Algolia, 100ms, Mux, and RevenueCat.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
- How to let users customize toolbar buttons
- How to add custom swipe action buttons to a List row
- How to create a toolbar and add buttons to it
- How to add actions to alert buttons
- How to get custom colors and transparency with SF Symbols
