Button icon in List to match style?

Question

vladimirs OP

Created Oct ’24

Replies 3

Boosts 0

Participants 2

I am trying to figure out how to set a button's label icon to match the button style when inside a list.

These four buttons display differently depending on context – if put inside a List or a VStack:

Button(role: .destructive) {} label: {
    Label("Test", systemImage: "figure")
}.buttonStyle(.automatic)

Button(role: .destructive) {} label: {
    Label("Test", systemImage: "figure")
}.buttonStyle(.bordered)

Button {} label: {
    Label("Test", systemImage: "figure")
}.buttonStyle(.borderedProminent)

Button(role: .destructive) {} label: {
    Label("Test", systemImage: "figure")
}.buttonStyle(.borderedProminent)

Inside a List, which looks weird in my opinion.

Screenshot 2024-10-02 at 10.38.40.png

For reference, this is what they look like inside a VStack, which is what I'd expect:

Screenshot 2024-10-02 at 10.39.04.png

I am not sure if this is intentional or a bug. If there are any workaround which do not explicitly set a specific color, like .foreground(.red), please let me know.

Answered by Claude31 in 806959022

Problem is that buttons in List receive all the defaults style attributes of the List.

Hence you have to set manually each style element.

Or it may be easier to put the buttons in a ScrollView instead of List.

Boost

Answer 1

Claude31 OP

Oct ’24

Recommended

Problem is that buttons in List receive all the defaults style attributes of the List.

Hence you have to set manually each style element.

Or it may be easier to put the buttons in a ScrollView instead of List.

0

Answer 2

vladimirs OP

Oct ’24

I understand that the buttons inherit their style from the list, but I honestly believe that the default behavior looks really odd; a normal destructive button in a list looks like this:

Screenshot 2024-10-03 at 10.14.09.png

Is there really no other way to have buttons keep their style, without individually setting an explicit .foregroundStyle(…) to color the icons?

In my code example above I have the smallest possible example to describe my issue. In our app we rely on Lists – I can't switch to a ScrollView there.

0

Answer 3

Claude31 OP

Oct ’24

The mechanism for style in containers is deep into Swift design. So it is unlikely to change.

Replacing List by ScrollView should give you what you're looking for.

0