CloseButton component

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 dismissed, if not inside one of these components the Clicked EventCallback must be set for it to be useful.

Examples

With manual close

<Alert Visible="@visible">
    ...
    <CloseButton Clicked="@OnClicked" />
</Alert>
@code {
    bool visible = true;

    Task OnClicked()
    {
        visible = false;

        return Task.CompletedTask;
    }
}

With auto close

<Alert @bind-Visible="@visible">
    ...
    <CloseButton AutoClose="true" />
</Alert>
@code {
    bool visible = true;
}

Usage with other components

@if ( visible )
{
    <div>
        ...
        <CloseButton Clicked="@OnClicked" />
    </div>
}
@code {
    bool visible = true;

    Task OnClicked()
    {
        visible = false;

        return Task.CompletedTask;
    }
}

Attributes

Name	Type	Default	Description
Clicked	EventCallback		Occurs when the Button is clicked.
AutoClose	bool	true	If true, the parent Alert or Modal with be automatically closed.