Hide text and show only icon in a RadzenButton

Radzen.Blazor Components
1

I have a button (RadzenButton ButtonStyle="Radzen.ButtonStyle.Success" Icon="add" Text="Adicionar" Style="margin-bottom: 10px; background-color: rgba(56, 181, 74, 0.64); border-radius: 25px; text-transform: capitalize; color: #ffffff;" Variant="Variant.Flat" Click="@AddParceiro" /) I need that when the screen is on small devices, only the icon appears on a button.

2

Hi @joao-vendra,

You can use Radzen's CSS utility classes to show/hide components on different screen sizes. In your case you need two buttons to show/hide on small devices respectively - one icon only button for smaller screens and one icon + text for larger screens.

The classes that you need are Class="rz-display-inline-block rz-display-sm-none" for the icon only button, and Class="rz-display-none rz-display-sm-inline-block" for the larger one.

    <RadzenButton Class="rz-display-inline-block rz-display-sm-none" Icon="add" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Medium" />
    <RadzenButton Class="rz-display-none rz-display-sm-inline-block" Text="Create" Icon="add" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Medium" />

show-hide-buttons

You can use different responsive breakpoints in the CSS classes - see the Responsive Breakpoints demo.

3

This worked for me, thanks.