Button icon in List to match style?

Question

vladimirs OP

Created 17h

Replies 1

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.

Boost

Answer 1

Claude31 OP

16h

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