sufi-blazor/docs/components/overlays/SbConfirmDialog.md

SbConfirmDialog

A specialized dialog for confirmation actions with predefined variants for different use cases.

Parameters

Parameter	Type	Default	Description
Title	string	"Confirm"	Dialog title
Message	string?	null	Dialog message text
Variant	SbConfirmDialogVariant	Default	Dialog variant (affects icon and button color)
ConfirmText	string	"Confirm"	Text for confirm button
CancelText	string	"Cancel"	Text for cancel button
ShowCancelButton	bool	true	Whether to show cancel button
CloseOnOverlayClick	bool	true	Close when clicking outside
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
OnConfirm	EventCallback	Fired when confirmed
OnCancel	EventCallback	Fired when cancelled

Templates / Slots

Slot	Type	Description
Icon	RenderFragment	Custom icon content
ChildContent	RenderFragment	Additional content below message

Methods

Method	Return Type	Description
ShowAsync()	Task<bool>	Show dialog and await result
Show()	void	Show dialog (use events for result)
Close()	void	Close the dialog

SbConfirmDialogVariant Enum

public enum SbConfirmDialogVariant
{
    Default,  // Question icon, primary button
    Danger,   // Warning icon, danger button
    Warning,  // Warning icon, warning button
    Info      // Info icon, info button
}

CSS Classes

• sb-confirm-dialog-overlay - Backdrop overlay
• sb-confirm-dialog - Dialog container
• sb-confirm-dialog--{variant} - Variant styles
• sb-confirm-dialog__icon - Icon container
• sb-confirm-dialog__content - Content area
• sb-confirm-dialog__title - Title text
• sb-confirm-dialog__message - Message text
• sb-confirm-dialog__body - Custom content area
• sb-confirm-dialog__actions - Action buttons

Examples

Basic Usage

<SbButton OnClick="() => confirmDialog.Show()">Delete Item</SbButton>

<SbConfirmDialog @ref="confirmDialog"
                 Title="Delete Item"
                 Message="Are you sure you want to delete this item?"
                 OnConfirm="DeleteItem"
                 OnCancel="() => { }" />

@code {
    private SbConfirmDialog confirmDialog;
    
    private async Task DeleteItem()
    {
        await itemService.DeleteAsync(item.Id);
    }
}

Async Usage

<SbButton OnClick="HandleDelete">Delete</SbButton>

<SbConfirmDialog @ref="confirmDialog"
                 Title="Delete Item"
                 Message="This action cannot be undone."
                 Variant="SbConfirmDialogVariant.Danger"
                 ConfirmText="Delete"
                 CancelText="Keep" />

@code {
    private SbConfirmDialog confirmDialog;
    
    private async Task HandleDelete()
    {
        var confirmed = await confirmDialog.ShowAsync();
        if (confirmed)
        {
            await DeleteItemAsync();
        }
    }
}

Danger Variant

<SbConfirmDialog @ref="deleteDialog"
                 Title="Delete Account"
                 Message="This will permanently delete your account and all associated data. This action cannot be undone."
                 Variant="SbConfirmDialogVariant.Danger"
                 ConfirmText="Delete Account"
                 CancelText="Cancel"
                 OnConfirm="DeleteAccount" />

Warning Variant

<SbConfirmDialog @ref="warningDialog"
                 Title="Unsaved Changes"
                 Message="You have unsaved changes. Are you sure you want to leave?"
                 Variant="SbConfirmDialogVariant.Warning"
                 ConfirmText="Leave"
                 CancelText="Stay"
                 OnConfirm="NavigateAway" />

Info Variant

<SbConfirmDialog @ref="infoDialog"
                 Title="New Version Available"
                 Message="A new version is available. Would you like to update now?"
                 Variant="SbConfirmDialogVariant.Info"
                 ConfirmText="Update Now"
                 CancelText="Later"
                 OnConfirm="UpdateApp" />

Custom Icon

<SbConfirmDialog @ref="logoutDialog"
                 Title="Sign Out"
                 Message="Are you sure you want to sign out?"
                 ConfirmText="Sign Out"
                 OnConfirm="SignOut">
    <Icon>
        <SbIcon Name="log-out" Size="SbSize.Lg" />
    </Icon>
</SbConfirmDialog>

With Additional Content

<SbConfirmDialog @ref="deleteUsersDialog"
                 Title="Delete Users"
                 Message="The following users will be deleted:"
                 Variant="SbConfirmDialogVariant.Danger"
                 ConfirmText="Delete All"
                 OnConfirm="DeleteSelectedUsers">
    <ChildContent>
        <ul class="mt-2">
            @foreach (var user in selectedUsers)
            {
                <li>@user.Name (@user.Email)</li>
            }
        </ul>
    </ChildContent>
</SbConfirmDialog>

Without Cancel Button

<SbConfirmDialog @ref="acknowledgeDialog"
                 Title="Important Notice"
                 Message="Please read and acknowledge the updated terms of service."
                 ShowCancelButton="false"
                 ConfirmText="I Understand"
                 Variant="SbConfirmDialogVariant.Info"
                 OnConfirm="AcknowledgeTerms" />

Prevent Overlay Close

<SbConfirmDialog @ref="criticalDialog"
                 Title="Confirm Critical Action"
                 Message="This action requires explicit confirmation."
                 CloseOnOverlayClick="false"
                 Variant="SbConfirmDialogVariant.Danger"
                 ConfirmText="I Confirm"
                 OnConfirm="ExecuteCriticalAction" />

Bulk Delete Confirmation

<SbButton Disabled="@(selectedItems.Count == 0)"
          Color="SbColor.Danger"
          OnClick="() => bulkDeleteDialog.Show()">
    Delete Selected (@selectedItems.Count)
</SbButton>

<SbConfirmDialog @ref="bulkDeleteDialog"
                 Title="Delete Items"
                 Variant="SbConfirmDialogVariant.Danger"
                 ConfirmText="Delete @selectedItems.Count Items"
                 OnConfirm="BulkDelete">
    <ChildContent>
        <SbText>
            Are you sure you want to delete @selectedItems.Count items?
            This action cannot be undone.
        </SbText>
    </ChildContent>
</SbConfirmDialog>