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

SbButton

Primary action element with multiple variants, sizes, and states. Can render as a button or anchor element.

Parameters

Parameter	Type	Default	Description
Variant	SbButtonVariant	Solid	Button style variant (Solid, Outline, Ghost, Link)
Size	SbSize	Md	Button size (Xs, Sm, Md, Lg, Xl)
Color	SbColor	Primary	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
FullWidth	bool	false	Whether the button takes full container width
Type	string	"button"	HTML button type (button, submit, reset)
Href	string?	null	If set, renders as anchor element instead of button
Target	string?	null	Target for anchor links (_blank, _self, etc.)
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
ChildContent	RenderFragment	The button's text or content
StartIcon	RenderFragment	Icon rendered before the content
EndIcon	RenderFragment	Icon rendered after the content

Template Usage Examples

Basic Content

<SbButton>Click Me</SbButton>

With Start Icon

<SbButton>
    <StartIcon><SbIcon Name="plus" Size="SbSize.Sm" /></StartIcon>
    <ChildContent>Add Item</ChildContent>
</SbButton>

With End Icon

<SbButton Variant="SbButtonVariant.Outline">
    <ChildContent>Download</ChildContent>
    <EndIcon><SbIcon Name="download" Size="SbSize.Sm" /></EndIcon>
</SbButton>

With Both Icons

<SbButton>
    <StartIcon><SbIcon Name="save" Size="SbSize.Sm" /></StartIcon>
    <ChildContent>Save Changes</ChildContent>
    <EndIcon><SbIcon Name="check" Size="SbSize.Sm" /></EndIcon>
</SbButton>

CSS Classes

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

Accessibility

• Uses native <button> or <a> elements
• Keyboard navigation: Tab to focus, Enter/Space to activate
• aria-disabled set when disabled (for anchor variant)
• aria-busy set when loading
• rel="noopener noreferrer" automatically added for external links

Examples

Variants

<SbStack Direction="SbStackDirection.Row" Gap="3">
    <SbButton Variant="SbButtonVariant.Solid">Solid</SbButton>
    <SbButton Variant="SbButtonVariant.Outline">Outline</SbButton>
    <SbButton Variant="SbButtonVariant.Ghost">Ghost</SbButton>
    <SbButton Variant="SbButtonVariant.Link">Link</SbButton>
</SbStack>

Colors

<SbStack Direction="SbStackDirection.Row" Gap="3">
    <SbButton Color="SbColor.Primary">Primary</SbButton>
    <SbButton Color="SbColor.Secondary">Secondary</SbButton>
    <SbButton Color="SbColor.Success">Success</SbButton>
    <SbButton Color="SbColor.Warning">Warning</SbButton>
    <SbButton Color="SbColor.Danger">Danger</SbButton>
</SbStack>

Sizes

<SbStack Direction="SbStackDirection.Row" Gap="3" Align="SbAlign.Center">
    <SbButton Size="SbSize.Sm">Small</SbButton>
    <SbButton Size="SbSize.Md">Medium</SbButton>
    <SbButton Size="SbSize.Lg">Large</SbButton>
</SbStack>

States

<SbStack Direction="SbStackDirection.Row" Gap="3">
    <SbButton>Normal</SbButton>
    <SbButton Disabled="true">Disabled</SbButton>
    <SbButton Loading="true">Loading</SbButton>
</SbStack>

As Link

<SbButton Href="https://github.com" Target="_blank">
    Go to GitHub
</SbButton>

Form Submit

<SbButton Type="submit" Color="SbColor.Success">
    Submit Form
</SbButton>

Click Handler (OnClick)

<SbButton OnClick="HandleClick">Click me</SbButton>

@code {
    private void HandleClick(MouseEventArgs e) { ... }
}