Skip to main content

How to get bordered buttons that stand out

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to get bordered buttons that stand out 관련

SwiftUI by Example

Back to Home

How to get bordered buttons that stand out | SwiftUI by Example

How to get bordered buttons that stand out

Updated for Xcode 15

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 projectopen in new window

A grey capsule-shaped button containing the text “Buy: $0.99” in blue.
A grey capsule-shaped button containing the text “Buy: $0.99” in blue.

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 projectopen in new window

A bright blue capsule containing the text “Buy: $0.99”.
A bright blue capsule containing the text “Buy: $0.99”.

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 projectopen in new window

A deep blue capsule containing the text “Submit”.
A deep blue capsule containing the text “Submit”.

Or by attaching a role to the button:

Button("Delete", role: .destructive) {
    print("Deleting…")
}
.buttonStyle(.borderedProminent)

Download this as an Xcode projectopen in new window

A red capsule containing the text “Delete”.
A red capsule containing the text “Delete”.
Similar solutions…
How to add custom swipe action buttons to a List row | SwiftUI by Example

How to add custom swipe action buttons to a List row
How to let users customize toolbar buttons | SwiftUI by Example

How to let users customize toolbar buttons
How to create a toolbar and add buttons to it | SwiftUI by Example

How to create a toolbar and add buttons to it
How to add actions to alert buttons | SwiftUI by Example

How to add actions to alert buttons
How to make buttons that repeat their action when pressed | SwiftUI by Example

How to make buttons that repeat their action when pressed

이찬희 (MarkiiimarK)
Never Stop Learning.