sufi-blazor/docs/components/actions/SbIconButton.md

SbIconButton

Icon-only button for toolbar actions, close buttons, and other compact interactions. Use AriaLabel (or Title) for accessibility when there is no visible text.

Parameters

Parameter	Type	Default	Description
Icon	RenderFragment?	null	Icon content when set explicitly (e.g. Icon="@(...)")
ChildContent	RenderFragment?	null	Icon content when placed between tags. At least one of Icon or ChildContent should be set.
AriaLabel	string?	null	Accessible label for screen readers (recommended for icon-only buttons)
Variant	SbButtonVariant	Ghost	Button style variant (Solid, Outline, Ghost, Link)
Size	SbSize	Md	Button size (Xs, Sm, Md, Lg, Xl)
Color	SbColor	Default	Color intent (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted)
Disabled	bool	false	Whether the button is disabled
Loading	bool	false	Whether the button shows a loading spinner
Type	string	"button"	HTML button type (button, submit, reset)
Title	string?	null	Tooltip text
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes (e.g. aria-, data-)

Events

Event	Type	Description
OnClick	EventCallback	Fired when the button is clicked

Templates / Slots (RenderFragments)

Slot	Type	Description
Icon	RenderFragment?	Icon when set explicitly (e.g. Icon="@(...)")
ChildContent	RenderFragment?	Icon when placed between tags (default slot). Use either Icon or ChildContent.

Template Usage Examples

Using ChildContent (content between tags)

<SbIconButton AriaLabel="Close">
    <SbIcon Name="x" />
</SbIconButton>

Using Icon slot

<SbIconButton AriaLabel="Settings" Title="Open Settings">
    <Icon><SbIcon Name="settings" /></Icon>
</SbIconButton>

CSS Classes

• sb-icon-button - Base class
• sb-icon-button--solid - Solid variant
• sb-icon-button--outline - Outline variant
• sb-icon-button--ghost - Ghost variant
• sb-icon-button--link - Link variant
• sb-icon-button--xs - Extra small size
• sb-icon-button--sm - Small size
• sb-icon-button--md - Medium size
• sb-icon-button--lg - Large size
• sb-icon-button--xl - Extra large size
• sb-icon-button--primary - Primary color
• sb-icon-button--secondary - Secondary color
• sb-icon-button--success - Success color
• sb-icon-button--warning - Warning color
• sb-icon-button--danger - Danger color
• sb-icon-button--info - Info color
• sb-icon-button--muted - Muted color
• sb-icon-button--disabled - Disabled state
• sb-icon-button--loading - Loading state

Accessibility

• Uses native <button> element
• AriaLabel (or Title) is recommended for icon-only buttons so screen readers have a label
• aria-busy set when loading
• title attribute provides tooltip on hover
• Keyboard accessible: Tab to focus, Enter/Space to activate

Examples

Basic Usage

<SbIconButton AriaLabel="Close dialog">
    <SbIcon Name="x" />
</SbIconButton>

Colors

<SbStack Direction="SbStackDirection.Row" Gap="2">
    <SbIconButton AriaLabel="Edit" Color="SbColor.Primary">
        <SbIcon Name="edit" />
    </SbIconButton>
    <SbIconButton AriaLabel="Delete" Color="SbColor.Danger">
        <SbIcon Name="trash" />
    </SbIconButton>
    <SbIconButton AriaLabel="Favorite" Color="SbColor.Warning">
        <SbIcon Name="star" />
    </SbIconButton>
</SbStack>

Sizes

<SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
    <SbIconButton AriaLabel="Small" Size="SbSize.Sm">
        <SbIcon Name="heart" Size="SbSize.Sm" />
    </SbIconButton>
    <SbIconButton AriaLabel="Medium" Size="SbSize.Md">
        <SbIcon Name="heart" />
    </SbIconButton>
    <SbIconButton AriaLabel="Large" Size="SbSize.Lg">
        <SbIcon Name="heart" Size="SbSize.Lg" />
    </SbIconButton>
</SbStack>

Variants

<SbStack Direction="SbStackDirection.Row" Gap="2">
    <SbIconButton AriaLabel="Ghost" Variant="SbButtonVariant.Ghost">
        <SbIcon Name="settings" />
    </SbIconButton>
    <SbIconButton AriaLabel="Outline" Variant="SbButtonVariant.Outline">
        <SbIcon Name="settings" />
    </SbIconButton>
    <SbIconButton AriaLabel="Solid" Variant="SbButtonVariant.Solid">
        <SbIcon Name="settings" />
    </SbIconButton>
    <SbIconButton AriaLabel="Link" Variant="SbButtonVariant.Link">
        <SbIcon Name="settings" />
    </SbIconButton>
</SbStack>

States (Disabled, Loading)

<SbStack Direction="SbStackDirection.Row" Gap="2">
    <SbIconButton AriaLabel="Delete"><SbIcon Name="trash" /></SbIconButton>
    <SbIconButton AriaLabel="Delete (disabled)" Disabled="true"><SbIcon Name="trash" /></SbIconButton>
    <SbIconButton AriaLabel="Loading" Loading="true"><SbIcon Name="trash" /></SbIconButton>
</SbStack>

With Tooltip

<SbIconButton AriaLabel="Refresh data" Title="Refresh">
    <SbIcon Name="refresh" />
</SbIconButton>

In a Toolbar

<SbStack Direction="SbStackDirection.Row" Gap="1">
    <SbIconButton AriaLabel="Bold" Title="Bold (Ctrl+B)">
        <SbIcon Name="bold" Size="SbSize.Sm" />
    </SbIconButton>
    <SbIconButton AriaLabel="Italic" Title="Italic (Ctrl+I)">
        <SbIcon Name="italic" Size="SbSize.Sm" />
    </SbIconButton>
    <SbIconButton AriaLabel="Underline" Title="Underline (Ctrl+U)">
        <SbIcon Name="underline" Size="SbSize.Sm" />
    </SbIconButton>
</SbStack>