Roger Sterling Roger Sterling - 2 months ago 11
CSS Question

How do I style the confirmation buttons within primeng's ConfirmDialog modal?

I'm confused on how to go about styling the 2 'confirm' and 'cancel' buttons within Angular's primeng library when using the ConfirmDialog.


I'd like to make the 'confirm' button remain green, and change style the 'cancel' button red.
Changing the styling within the css for:

.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button

changes colors on both buttons. Is there a way around this?

Answer Source

You could use the CSS Adjacent Sibling Selector to target the buttons, this assumes there will only be two buttons, the confirm and cancel:

.ui-dialog-footer .ui-button {
    background: /* some green color */

.ui-dialog-footer .ui-button + .ui-button {
    background: /* some red color */

The buttons seem to be in a container div with CSS class .ui-dialog-footer when trying the demo in the link you provided. However if your implementation has the buttons in a different container/namespace, you can replace .ui-dialog-footer with whatever you'd need to prevent the styles from affecting ALL buttons in your application.

Here is a jsfiddle demonstrating the functionality in action.

Hopefully that helps!