Button display text only on desktop and above

[NeoCoderMatrix86]

Hello,
I use Blazorise inside my application and want it to have responsive design in order to be usable on smartphones to. So I use a couple of Buttons with icons and text. How do I display the text only on desktop and above?
Sample for a Button:

<Button Color="Color.Info">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16">
                                                    <path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z" />
                                                    <path d="M8.354 10.354l7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z" />
                                                </svg>
                                                @localizer["Display selection of tracks"]
                                            </Button>

Thanks for your help :)

[stsrki]

This maybe?

<Button Display="Display.None.OnMobile.InlineBlock.OnTablet" Color="Color.Primary">
    Hello
</Button>

It is calling fluent syntax and it works in a way that first you tell what to do (None) and then where or when to do it (OnMobile). A similar thing can be done for ColumnSize, Margin, and Padding, FYI :)

[NeoCoderMatrix86]

Ok, I see the point. Is there a possibility to define a breakpoint in Buttons component, so that Buttons (i have 3 in a row) have each seperate row in mobile view?

[stsrki]

I'm not sure if I understand. You have three <Buttons> with threat button each? Or just regular three <Button> component?

Either case:

<Buttons Display="Display.Block.OnMobile.InlineBlock.OnTablet">
    <Button Color="Color.Primary">PRIMARY</Button>
    <Button Color="Color.Secondary">SECONDARY</Button>
    <Button Color="Color.Success">SUCCESS</Button>
</Buttons>
<Buttons Display="Display.Block.OnMobile.InlineBlock.OnTablet">
    <Button Color="Color.Primary">PRIMARY</Button>
    <Button Color="Color.Secondary">SECONDARY</Button>
    <Button Color="Color.Success">SUCCESS</Button>
</Buttons>
<Buttons Display="Display.Block.OnMobile.InlineBlock.OnTablet">
    <Button Color="Color.Primary">PRIMARY</Button>
    <Button Color="Color.Secondary">SECONDARY</Button>
    <Button Color="Color.Success">SUCCESS</Button>
</Buttons>

or

<Button Display="Display.Block.OnMobile.InlineBlock.OnTablet" Color="Color.Primary">PRIMARY</Button>
<Button Display="Display.Block.OnMobile.InlineBlock.OnTablet" Color="Color.Secondary">SECONDARY</Button>
<Button Display="Display.Block.OnMobile.InlineBlock.OnTablet" Color="Color.Success">SUCCESS</Button>

[NeoCoderMatrix86]

I have a Buttons Toolbar:

<Buttons Role="ButtonsRole.Toolbar">
                                        <Buttons Margin="Margin.Is2.FromRight">
                                            <Button id="@cuesheetController.GetFieldIdentifier(cuesheet, nameof(Cuesheet.Tracks))" Color="Color.Primary" Clicked="() => cuesheet.AddTrack(new Track(), optionsController.Options)">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
                                                    <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                                                    <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                                                </svg>
                                                @localizer["Add new track"]
                                            </Button>
                                        </Buttons>
                                        <Buttons Margin="Margin.Is2.FromRight" Display="DisplaySelectionButtons">
                                            <Button Color="Color.Info" Clicked="() => DisplaySelectionTracks()">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16">
                                                    <path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5H3z" />
                                                    <path d="M8.354 10.354l7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z" />
                                                </svg>
                                                @localizer["Display selection of tracks"]
                                            </Button>
                                        </Buttons>
                                        <Buttons>
                                            <Button Color="Color.Warning" Display="DisplayDeleteSelection" Clicked="DeleteSelectedTracksClicked">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                                                </svg>
                                                @localizer["Delete selected tracks"]
                                            </Button>
                                            <Button Color="Color.Danger" Clicked="OnDeleteAllTracksClicked">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                                                </svg>
                                                @localizer["Delete all tracks"]
                                            </Button>
                                        </Buttons>
                                    </Buttons>

But this leads to no spacing in smartphone view:

[stsrki]

Same thing with margins

<Button Display="Display.Block.OnMobile.InlineBlock.OnTablet" Margin="Margin.Is2.OnMobile.Is0.OnTablet" Color="Color.Primary">PRIMARY</Button>
<Button Display="Display.Block.OnMobile.InlineBlock.OnTablet" Margin="Margin.Is2.OnMobile.Is0.OnTablet" Color="Color.Secondary">SECONDARY</Button>
<Button Display="Display.Block.OnMobile.InlineBlock.OnTablet" Margin="Margin.Is2.OnMobile.Is0.OnTablet" Color="Color.Success">SUCCESS</Button>

[NeoCoderMatrix86]

Ok, thanks, shame on me, for forgetting margin xD. Another little question (I'm not so familiar fluent design):
I have a Buttons group and only want to display it, if the screen is above table:

<Buttons Margin="Margin.Is1.FromRight" Display="Display.Always.OnDesktop.None.OnTablet.None.OnMobile">
  [...]
</Buttons>

But this way, the buttons disappear wholely?!

[stsrki]

Display="Display.None.OnMobile.None.OnTablet.InlineBlock.OnDesktop"

[NeoCoderMatrix86]

Almost perfekt :). I have this Buttons group inside a buttons group toolbar. The solution leads to this:

<Buttons Role="ButtonsRole.Toolbar">
[...]
<Buttons Margin="Margin.Is1.FromRight" Display="Display.None.OnMobile.None.OnTablet.InlineBlock.OnDesktop">
<Tooltip Placement="Placement.Right" Text="@localizer["Move track up tooltip"]">
                                                                        <Button Size="Size.Small" Color="Color.Secondary" Disabled="!cuesheet.MoveTrackPossible(track, MoveDirection.Up)" Clicked="() => cuesheet.MoveTrack(track, MoveDirection.Up)">
                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-up" viewBox="0 0 16 16">
                                                                                <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z" />
                                                                            </svg>
                                                                        </Button>
                                                                    </Tooltip>
                                                                    <Tooltip Placement="Placement.Right" Text="@localizer["Move track down tooltip"]">
                                                                        <Button Size="Size.Small" Color="Color.Secondary" Disabled="!cuesheet.MoveTrackPossible(track, MoveDirection.Down)" Clicked="() => cuesheet.MoveTrack(track, MoveDirection.Down)">
                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-bar-down" viewBox="0 0 16 16">
                                                                                <path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z" />
                                                                            </svg>
                                                                        </Button>
                                                                    </Tooltip>
</Buttons>
[...]
</Buttons>

[NeoCoderMatrix86]

I managed to find the problem.
Correctly the Display should be
Display.None.OnMobile.None.OnTablet.Flex.Row.OnDesktop

[stsrki]

Cool, Glad you were able to find the solution :)