Ability to add a background color / fill color to row action buttons

💬 Feature Requests
1

It would be nice if we had the ability to assign a background to buttons displayed in our row actions on a table component for to improve UX, end-user accessibility, and action clarity in apps.

Any talk of this being implemented in the future? Thanks!

1 Like
3

Hey @AJVancattenburch - this isn't something I've specifically heard mentioned, but I've documented the request internally and will let you know when there's been an update. :+1:

1 Like
4

I appreciate that thanks @Darren!

In the meantime, I did happen to find a temporary custom CSS solution if anyone else is ever interested. Just be sure all your tables have a name ending with 'Table', i.e. 'firstTable', 'secondTable', etc. Also, be sure to update the data-testid value for each svg[data-testid="Icon::bold/interface-add-circle"] svg element's data-testid attribute so it matches the string value of whatever icon you are using for your row action:

[id*="Table"] > [class*="_content_"] [class*="_outer_"] [class*="_grid_"] [class*="_main_"] {
  button:has(svg[data-testid="Icon::bold/interface-add-circle"]) {
    background: {{ theme.automatic[4] }};
    outline: 1px ridge {{ theme.surfacePrimary }};
    svg[data-testid="Icon::bold/interface-add-circle"] {
      fill: {{ theme.primary }};
    }
  }
  button:has(svg[data-testid="Icon::bold/interface-delete-circle"]) {
    background: {{ theme.automatic[0] }};
    outline: 1px ridge {{ theme.surfacePrimary }};
    svg[data-testid="Icon::bold/interface-delete-circle"] {
      fill: {{ theme.danger }};
    }
  }
  button:has(svg[data-testid="Icon::bold/interface-edit-pencil"]) {
    background: {{ theme.automatic[2] }};
    outline: 1px ridge {{ theme.surfacePrimary }};
    svg[data-testid="Icon::bold/interface-edit-pencil"] {
    fill: {{ theme.tertiary }};
  }
}

This allows you to assign a background color to the button, an outline or border (if desired), and a fill color to the svg/icon that is in your button element.

1 Like
5

Very nice solution, @AJVancattenburch! Thanks for documenting this. :+1:

I'll mark your custom CSS workaround as the tentative solution, but keep the topic open and provide an update if and when we support this natively!

1 Like