Change color of buttons within alerts

Anvil Q&A
1

Hi,

I am trying to change the color of the buttons within an alert without success.

First I created the following role:

.anvil-role-accent1{}.btn{background-color:%color:Accent 1% !important; 
                          color: %color:Header Background% !important; ;

Then, I call the alert as follows:

alert(content="Inputs must be numerical", title='Input Error', role='accent1')

The OK button within the alert only changes color when I move the mouse over it, but extrangely only half of button changes color

2

Not really the answer to your question, but I had the same problem and I solved it by not using the alert buttons.

If you add your own buttons to the alert, they look and feel like all other buttons on your app.

I always use alert2 defined in the InputBox custom component, which behaves similarly to the normal alert.

It has the limitation that doesn’t accept a form as content, but it is usually not a problem for me, because if I need to show a form in an alert, then I put the buttons in the form itself and show the alert without buttons, while when I want to show a message, alert2 uses buttons with the same style as the rest of the app, plus I can use markup.

2 Likes
3

I use the same approach to not only change the colour but also add icons to the buttons. +1 for loading a Form (appropriately styled) into the content of the alert and then set the buttons of the alert to None

image
image832×202 9.44 KB

1 Like