Blazorise CloseButton component

A generic close button for dismissing content like modals and alerts.

The <CloseButton> is a simple button that highlights to the user that a part of the current UI can be dismissed such as an Alert or a Modal.

When used in an Alert or a Modal the component will be closed automatically. If not inside one of these components the Clicked EventCallback must be set for it to be useful.

Examples

<Alert Visible="@visible">
    I can be closed!
    <CloseButton Clicked="@OnClicked" />
</Alert>

@code {
    bool visible = true;

    Task OnClicked()
    {
        visible = false;

        return Task.CompletedTask;
    }
}

<Alert @bind-Visible="@visible">
    I can be closed!
    <CloseButton AutoClose="true" />
</Alert>

@code {
    bool visible = true;
}

@if ( visible )
{
    <Div>
        Now you see me...
        <CloseButton Clicked="@OnClicked" />
    </Div>
}

@code {
    bool visible = true;

    Task OnClicked()
    {
        visible = false;

        return Task.CompletedTask;
    }
}

Best Practices

Dismissal Only

A close button should dismiss a nearby surface such as an alert, modal, or panel. Use a labeled <Button> for delete or cancel actions. Place the close control consistently in the expected corner and preserve a comfortable pointer and touch target around the icon.

Manage Focus

Give the button an accessible name that identifies what it closes whenever the surrounding context is not obvious. After closing an overlay, restore focus to the control that opened it so keyboard users can continue from a predictable location.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

• <CloseButton />