Swapping the Order of Buttons on Confirm Dialog

Radzen.Blazor Components
1

Hi Team,

Been a while, but I have another project that uses Radzen UI. Congrats on v12, looking real good.

Quick question, just to make sure I’m not missing anything, before I go and make a custom dialog.

I’ve added some Yes/No confirm dialogs to the app I’m working on, and the stake-holders have stated “We prefer the Call to Action Button, on the Right”, is there a way I can swap the order of the Yes no buttons?

image
image430×219 12.8 KB

Cheers

Shawty

2

Yes, with CSS only. The confirm dialog buttons are in a flex container, so reversing the direction swaps them:

.rz-dialog-confirm-buttons {
    flex-direction: row-reverse;
}

To apply it only to specific dialogs, set CssClass in ConfirmOptions and scope the rule:

await DialogService.Confirm("Are you sure?", "Delete",
    new ConfirmOptions { OkButtonText = "Yes", CancelButtonText = "No", CssClass = "cta-right" });

.cta-right .rz-dialog-confirm-buttons {
    flex-direction: row-reverse;
}

Note that this is visual only - the Tab order stays Yes, then No.

3

Thanks Enchev,

Tab order isn’t important, just that the stake holders want the Yes on the right visibly.

Cheers

Shawty