Blazor Alert

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Appearance customization: Customizable styles and themes.

Rendering options: Render your component as various HTML tags for maximum flexibility and integration.

Learn about core component features

Blazor Alert variants:

Primary Secondary Success Info Warning Danger
<BlazorAlert Variants="new[] {BaseVariants.Primary}">Primary</BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Secondary}">Secondary</BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Success}">Success</BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Info}">Info</BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Warning}">Warning</BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Danger}">Danger</BlazorAlert>

Blazor Alert variants with link:

Primary Visit Blazor School Secondary Visit Blazor School Success Visit Blazor School Info Visit Blazor School Warning Visit Blazor School Danger Visit Blazor School
<BlazorAlert Variants="new[] {BaseVariants.Primary}">Primary <BlazorAlertLink href="https:/blazorschool.com">Visit Blazor School</BlazorAlertLink></BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Secondary}">Secondary <BlazorAlertLink href="https:/blazorschool.com">Visit Blazor School</BlazorAlertLink></BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Success}">Success <BlazorAlertLink href="https:/blazorschool.com">Visit Blazor School</BlazorAlertLink></BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Info}">Info <BlazorAlertLink href="https:/blazorschool.com">Visit Blazor School</BlazorAlertLink></BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Warning}">Warning <BlazorAlertLink href="https:/blazorschool.com">Visit Blazor School</BlazorAlertLink></BlazorAlert>
<BlazorAlert Variants="new[] {BaseVariants.Danger}">Danger <BlazorAlertLink href="https:/blazorschool.com">Visit Blazor School</BlazorAlertLink></BlazorAlert>

Blazor Alert with header:

Hello Blazor School!

Primary
A powerful component designed specifically for Blazor
<BlazorAlert Variants="new[] {BaseVariants.Primary}">
    <BlazorAlertHeader>
        <h4>Hello Blazor School!</h4>
    </BlazorAlertHeader>
    Primary
    <hr />
    A powerful component designed specifically for Blazor
</BlazorAlert>

Blazor Alert with close button inside Blazor Alert:

Hello Blazor School!
<BlazorAlert Variants="new[] {BaseVariants.Secondary}">
    Hello Blazor School!
    <BlazorAlertCloseButton title="close" />
</BlazorAlert>

Blazor Alert with close button outside Blazor Alert:

Hello Blazor School!
<BlazorAlert Token="my-blazor-alert" Variants="new[] {BaseVariants.Secondary}">
    Hello Blazor School!
</BlazorAlert>
<BlazorAlertToggler TargetToken="my-blazor-alert" Context="Toggler">
    <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="Toggler.Close">Close</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="Toggler.Open">Open</BlazorButton>
    <BlazorButton type="button" Variants="new[] {BaseVariants.Danger}" @onclick="Toggler.Toggle">Toggle</BlazorButton>
</BlazorAlertToggler>

Appearance Customization

Learn about Theme Feature
Component & Variants CSS class
BlazorAlert alert alert-dismissible d-block
BlazorAlert.primary alert-primary
BlazorAlert.secondary alert-secondary
BlazorAlert.success alert-success
BlazorAlert.danger alert-danger
BlazorAlert.warning alert-warning
BlazorAlert.info alert-info
BlazorAlertLink alert-link
BlazorAlertHeader alert-heading
BlazorAlertCloseButton btn-close

Parameters

BlazorAlert

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.
Variants string[] Specifies the variant of the component.

BlazorAlertLink

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorAlertHeader

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

BlazorAlertCloseButton

Name Type Description
RenderAs string Specifies the HTML tag to be used for rendering the component. This can be any valid HTML tag, such as div, span, button, or other suitable tags.

Methods

BlazorAlert

Name Description
Open() Programmatically trigger the opening of an alert dialog.
Close() Programmatically trigger the closing of an alert dialog.
Toggle() Allows developers to effortlessly toggle the visibility of the alert dialog.

BlazorAlertToggler

Name Description
Open() Invoke the method with the same name as BlazorAlert to display the alert.
Close() Invoke the method with the same name as BlazorAlert to close the alert.
Toggle() Invoke the method with the same name as BlazorAlert to toggle the visibility of the alert.
An error has occurred. This application may no longer respond until reloaded. Reload 🗙