Button with Badge

Thomas · July 26, 2021, 11:29pm

Hello Radzen Team,
how can i define a button with a bagde in the Designer?
And if not in the Designer... how can i add a Badge to a Button anyway?
I cant find an Example for this...

Greets
Thomas

enchev · July 27, 2021, 5:48am

Hi @Thomas,

At the moment this is not possible using the designer. We will do our best to provide such functionality with our next update.

Thomas · July 27, 2021, 8:23am

Hi @enchev,
Great! Thank you very much!

Greets
Thomas

Thomas · August 4, 2021, 9:35am

Hi @enchev ,
is it possible to define a badge in/on the button in the new radzen version 2.62.0?
I saw " * (Blazor) Button Template/ChildContent design-time support added.".
But this does not work as expected. When i define a template the defined icon/image disappears from the Button...

Greets
Thomas

enchev · August 4, 2021, 10:31am

This is by design. The template of the the button will overwrite the entire content including the specified image, icon and text:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenButton.razor#L9


      
          @inherits RadzenComponent
          
          @if (Visible)
          {
              <button @ref="@Element" style="@Style" disabled="@IsDisabled"
                      type="@Enum.GetName(typeof(ButtonType), ButtonType).ToLower()"
                      @attributes="Attributes" class="@GetCssClass()" id="@GetId()"
                      @onclick="@OnClick">
                  <span class="rz-button-box">
                      @if (ChildContent != null)
                      {
                          @ChildContent
                      }
                      else
                      {
                          @if (IsBusy)
                          {
                              <RadzenIcon Icon="refresh" Style="animation: rotation 700ms linear infinite" />
                              @if (!string.IsNullOrEmpty(BusyText))

Andrew_Paull · March 9, 2022, 1:11am

A badge can be added to the button through designer by placing the badge in the position you want on the page, aligning the button against the badge, and setting the buttons margins on the negative (-) scale. this will cause the badge to overlap the button and allow you to independently define and execute properties and code for both. I did this to add messaging capability with badge notifications.

Thomas · January 16, 2023, 10:53am

Hi @enchev,
are there any plans to add the badge to the button via designer?
I cant find anything to do this in designer in 2.83.0.

Thomas

korchev · January 16, 2023, 10:55am

Use the Template property of the button to drag and drop a badge. Already available.

Thomas · January 16, 2023, 1:57pm

Ah. ok. Thanks for info!