Alert

<Stack Gap="3" Grow MaxWidth="36.Rem">
    <Alert Title="Update available">Version 2.4 is ready to install.</Alert>
    <Alert Status="Status.Success" Title="Saved">Your changes are live.</Alert>
    <Alert Status="Status.Warning">Your trial ends in 3 days.</Alert>
    <Alert Status="Status.Danger" Title="Couldn't save">The server didn't respond. Try again in a moment.</Alert>
    <Alert Status="Status.Neutral" HideIcon>Maintenance is scheduled for Sunday.</Alert>
</Stack>

<Stack Gap="3" Grow MaxWidth="36.Rem">
    <Alert Status="Status.Success" Title="Payment received">Invoice INV-1042 is paid.</Alert>
    <Alert Status="Status.Success" Variant="AlertVariant.Outline" Title="Payment received">Invoice INV-1042 is paid.</Alert>
    <Alert Status="Status.Success" Variant="AlertVariant.Solid" Title="Payment received">Invoice INV-1042 is paid.</Alert>
</Stack>

<Stack Gap="3" Grow MaxWidth="36.Rem">
    <Alert Status="Status.Warning" Title="Unverified email" Dismissible @bind-Dismissed="_dismissed">
        Check your inbox for the link we sent to ada@example.com.
        <AlertActions>
            <Button Size="ControlSize.Sm" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Resend email</Button>
        </AlertActions>
    </Alert>
    @* Interactive pages only (and their prerender, so nothing moves): C# shows it again. *@
    @if (RendererInfo.IsInteractive || AssignedRenderMode is not null)
    {
        <Switch @bind-Value="ShowReminder" Label="Show the reminder" />
    }
</Stack>

@code {
    private bool _dismissed;

    private bool ShowReminder
    {
        get => !_dismissed;
        set => _dismissed = !value;
    }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="alert-saved" OnValidSubmit="Save" Grow MaxWidth="28.Rem">
    @if (_saved is not null)
    {
        <Alert Status="Status.Success" Title="Saved" Dismissible @bind-Dismissed="_dismissed">
            The project is now called @_saved.
        </Alert>
    }
    <TextField @bind-Value="Model!.Name" />
    <FormActions>
        <Button Submit>Save</Button>
    </FormActions>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "alert-saved")]
    private ProjectName? Model { get; set; }

    private string? _saved;
    private bool _dismissed;

    protected override void OnInitialized() => Model ??= new();

    // What was saved, not the field: on an interactive page it changes as people type.
    // A new save shows the alert again, even if the last one was closed.
    private void Save()
    {
        _saved = Model!.Name;
        _dismissed = false;
    }
}