Some actions are states, not events. ToggleButton remembers whether it is on or off and tells assistive technology about it, so bold, filter and mute buttons behave the way users expect.
Why it helps
- Clear on and off state
- Announced correctly to screen readers
- Looks like the rest of your buttons
Where it fits
- Bold and italic in a toolbar
- Show or hide filters
- Mute and pin actions
Example
<Stack Align="center" Wrap="true">
<ToggleButton @bind-Pressed="_bold" Icon="IconName.Edit">Bold</ToggleButton>
<ToggleButton @bind-Pressed="_pinned" Icon="IconName.Bookmark" Color="ButtonColor.Success">Pinned</ToggleButton>
<ToggleButton Disabled="true">Disabled</ToggleButton>
<span>Bold: @_bold, pinned: @_pinned</span>
</Stack>
@code {
private bool _bold;
private bool _pinned = true;
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.