ProductUI Icon button - PrimerBlazor

Basic Icon Buttons

<PrimerIconButton Icon="IconName.Bold16"
                    Variant="ButtonVariant.Default"
                    AriaLabelName="Bold"
                    TooltipDirection="TooltipDirection.Top"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Italic16"
                    Variant="ButtonVariant.Danger"
                    AriaLabelName="Italic"
                    TooltipDirection="TooltipDirection.Right"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Code16"
                    Variant="ButtonVariant.Primary"
                    AriaLabelName="Code"
                    TooltipDirection="TooltipDirection.Bottom"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Link16"
                    Variant="ButtonVariant.Invisible"
                    AriaLabelName="Link"
                    TooltipDirection="TooltipDirection.Left"
                    OnClick="@(() => LogClick("clicked"))" />

Icon Button Sizes and Loading

<PrimerIconButton Icon="IconName.Search16"
                    Variant="ButtonVariant.Default"
                    Size="ButtonSize.Medium"
                    AriaLabelName="Search"
                    TooltipDirection="TooltipDirection.Top"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Play16"
                    Variant="ButtonVariant.Default"
                    Size="ButtonSize.Large"
                    AriaLabelName="Play"
                    TooltipDirection="TooltipDirection.Right"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Stop16"
                    Variant="ButtonVariant.Default"
                    Size="ButtonSize.Small"
                    AriaLabelName="Stop"
                    IsLoading="true"
                    TooltipDirection="TooltipDirection.Bottom"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Download16"
                    Variant="ButtonVariant.Default"
                    AriaLabelName="Download"
                    TooltipDirection="TooltipDirection.Left"
                    OnClick="@(() => LogClick("clicked"))" />

<PrimerIconButton Icon="IconName.Trash16"
                    Variant="ButtonVariant.Default"
                    AriaLabelName="Delete"
                    TooltipDirection="TooltipDirection.Top"
                    OnClick="@(() => LogClick("clicked"))" />

IconButton Options

Available options for IconButton component

Name	Description	Default Value	CSS Class
Icon	Icon to be displayed	-	PrimerIcon
Variant	Button visual variant	Default	btn-primary, btn-danger, etc.
Size	Size of the button	Small	btn-sm, btn-md, btn-large
IsLoading	Show a loading spinner instead of icon	false	spinner-animation
TooltipDirection	Direction of the tooltip	Bottom	-
AriaLabelName	ARIA label for accessibility	-	-
Disabled	Disable the button	false	-

private void LogClick(string label)
{
    Console.WriteLine($"{label} button clicked.");
}