How can I create a better looking notification?

[Martin Herløv]

I would like to create a notification that looks like this.

I like that it has a header and a body. Also that the alert color is bound to the icon

As I see it I need some container elements to pull it off, but I am in no way a css expert 😉

here is the html generated by Telerik

<div class="k-notification k-notification-secondary k-notification-closable">
  <span class="k-notification-status k-icon k-svg-icon k-svg-i-info-circle">
    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <path d="M288 352h32v32H192v-32h32v-96h-32v-32h96zm0-224h-64v64h64zm192 128c0 123.7-100.3 224-224 224S32 379.7 32 256 132.3 32 256 32s224 100.3 224 224m-32 0c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192">
      </path>
    </svg>
  </span>
  <div class="k-notification-content">
    Notification
  </div>
  <span class="k-notification-actions">
    <span class="k-notification-action k-notification-close-action">
      <span class="k-icon k-svg-icon k-svg-i-x">
        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z">
          </path>
        </svg>
      </span>
    </span>
  </span>
</div>

Overview of the Notification Component | Design System Kit (telerik.com)

Also a nice looking toast Blazor Toasts Component (blazorbootstrap.com)

[Dimo]

Hi Martin,

My suggestion is to use:

• Notification template
• Programmatic hiding with a custom close button

Start your HTML / CSS experiments from the example below, which removes the built-in Notification paddings, so you will have full control over the whole notification popup area.

<TelerikButton OnClick="@AddNotification">Add a notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference"
                     Class="reset-styles">
    <Template>
        <div>Notification content here...</div>
    </Template>
</TelerikNotification>

<style>
    .reset-styles .k-notification {
        padding: 0;
    }
</style>

@code {
    private TelerikNotification? NotificationReference { get; set; }

    public void AddNotification()
    {
        NotificationReference?.Show(new NotificationModel()
        {
            Text = "Success notification",
            Closable = false,
            CloseAfter = 0
        });
    }
}

Regards,
Dimo
Progress Telerik

[Martin Herløv]

Thanks, very cool solution

[Martin Herløv]

The model only supports one text field. I would like a title and text for the body. 
Possible? 

If I use another toast component, will I get into problem with position the toast, because of the TelerikRootComponent?

[Dimo]

@Martin

The Notification model has one text property, because there is one text label in the built-in UI too.

The TelerikRootComponent has no relevance to or effect on other third-party popups.