How can I change background color of button in SwiftUI?

Question

What is the best way to change the button's background color in SwiftUI?

I want to create a tile which is a button with centered Text and rectangular background of some color.

Daniel · Answer 1 · 2022-03-03T21:06:22.270

41

Button(action: { }) {
    Text("Button Text!").padding()
}
.background(Color.black)

edited Mar 03 '22 at 21:06

answered Jun 15 '19 at 12:32

Daniel

1,473
3
33
63

This one don't compile when button is in a VStack – HammerSlavik May 28 '20 at 15:17
How can I apply corner radius ? – Manish Dec 24 '21 at 10:01

score 32 · Accepted Answer · answered Jul 02 '20 at 15:41

32

You can add a modified directly to the button without any containers (ex: Group)

Button(action: {}) {
    Text("Click me!")
}
.padding()
.foregroundColor(.white)
.background(Color.red)

Hoping to help someone!

answered Jul 02 '20 at 15:41

Tuan Nguyen

2,624
1
17
15

2

how come . background(Color("Blue")) doesn't work when you have a color set in the assets folder?! – Learn2Code Mar 31 '21 at 01:21

score 31 · Answer 3 · answered Jul 16 '22 at 13:36

31

Also in SwiftUI, if you're using the .buttonStyle and want to change the background color, you'd use .tint, not .background. For example, this is how you can change a borderedProminent button style to green:

Button("Press Me!") {
    //stuff to do
}
.buttonStyle(.borderedProminent)
.tint(.green)

answered Jul 16 '22 at 13:36

Gallaugher

1,593
16
27

2

this is for above and ios 15, below ios 15 .background(Color.black) – Abdul Karim Sep 02 '22 at 10:06

score 11 · Answer 4 · answered Oct 17 '19 at 15:15

11

            Button(action: {self.buttonTapped()}) {
            Text("Button")
                .padding(.all, 12)
                .foregroundColor(.white)
                .background(Color.red)
        }

that's how the whole bg is clickable

answered Oct 17 '19 at 15:15

Bassem Tourky

482
5
12

3

this seems strange but it is the right way to customize background color in the button – RAUL QUISPE Feb 07 '20 at 16:03

yoAlex5 · Answer 5 · 2021-12-26T15:24:45.933

0

SwiftUI color

From iOS v13 and above, when you work with colors you should take into account Light and Dark mode.

.foregroundColor(.red)
.background(.blue)

For example .black in dark mode will be invisible(black on black). You can use system colors as a variant. For example UIColor.label

edited Dec 26 '21 at 15:24

answered May 03 '21 at 10:54

yoAlex5

29,217
8
193
205

How can I change background color of button in SwiftUI?

5 Answers5