Notification

The Notification component is a simple colored block meant to draw the attention to the user about something.

API Documentation

How it works #

The Notification component displays a colored message box to draw the user's attention to important information or feedback.

How to use:
  1. Add the Notification component to your page.
  2. Place your message or content inside the Notification tags.
  3. Optionally, customize the appearance using parameters such as Color, ShowLightVersion, or HideDeleteButton as needed.
This demo shows the default usage of the Notification component with simple content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat.
RAZOR
<Notification>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>

Colors #

The Notification component supports various color themes to indicate different types of messages, such as informational, success, warning, or danger.

How to use:
  1. Set the Color parameter to one of the predefined values (e.g., NotificationColor.Link, NotificationColor.Primary, NotificationColor.Info, NotificationColor.Success, NotificationColor.Warning, NotificationColor.Danger).
  2. Place your message or content inside the Notification tags.
The following demos show how to apply different color themes to notifications. 
<Notification Color="NotificationColor.Link">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Primary color to highlight the notification.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Primary">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Info color for informational messages.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Info">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Success color to indicate successful operations.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Success">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Warning color to alert users to potential issues.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Warning">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Danger color to indicate errors or critical messages.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Danger">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>

Light colors #

The Notification component can be displayed in a lighter color variant for a softer appearance.

How to use:
  1. Set the ShowLightVersion parameter to true on the Notification component.
  2. Choose a Color as desired.
  3. Place your message or content inside the Notification tags.
The following demos show notifications with light color variants. 
<Notification Color="NotificationColor.Link" ShowLightVersion="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Primary color in its light variant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Primary" ShowLightVersion="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Info color in its light variant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Info" ShowLightVersion="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Success color in its light variant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Success" ShowLightVersion="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Warning color in its light variant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Warning" ShowLightVersion="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>
This example uses the Danger color in its light variant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed fermentum, nunc a gravida consectetur, eros velit ultricies nulla, nec scelerisque nunc risus id neque. Fusce id ligula in odio gravida feugiat. Vestibulum venenatis, arcu ut pretium sollicitudin, ligula metus convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget tristique malesuada, purus sapien suscipit ligula, ut iaculis ipsum justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros. Aliquam erat volutpat. 
<Notification Color="NotificationColor.Danger" ShowLightVersion="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Fusce id ligula in odio gravida feugiat. Vestibulum venenatis,
    arcu ut <a>pretium sollicitudin</a>, ligula metus convallis risus,
    at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. Curabitur et felis sed odio tempor dictum nec ut eros.
    Aliquam erat volutpat.
</Notification>

Hide close button #

The Notification component includes a close button by default, allowing users to dismiss the notification. You can hide this button if you want the notification to remain visible.

How to use:
  1. Set the HideCloseButton parameter to true on the Notification component.
  2. Place your message or content inside the Notification tags.
This demo shows a notification without the close button. 
<Notification Color="NotificationColor.Link" HideCloseButton="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nulla facilisi. Sed fermentum, nunc a <strong>gravida consectetur</strong>,
    eros velit ultricies nulla, nec scelerisque nunc risus id neque.
    Vestibulum venenatis, arcu ut <a>pretium sollicitudin</a>, ligula metus 
    convallis risus, at vulputate felis ligula a nisl. Integer posuere, nisi eget
    tristique malesuada, purus sapien <em>suscipit ligula</em>, ut iaculis ipsum
    justo eget mauris. 
</Notification>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!