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

SbLink

Styled anchor element for navigation with support for external links, underline styles, and colors.

Parameters

Parameter	Type	Default	Description
Href	string?	null	The URL to navigate to
Target	string?	null	Link target (_blank, _self, etc.)
Rel	string?	null	Custom rel attribute
Disabled	bool	false	Whether the link is disabled
External	bool	false	Shows external link indicator icon
Color	SbColor	Primary	Link color (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted)
Underline	SbLinkUnderline	Hover	Underline behavior (Always, Hover, None)
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 link is clicked

Templates / Slots (RenderFragments)

Slot	Type	Description
ChildContent	RenderFragment	The link text or content

Template Usage Examples

Basic Link

<SbLink Href="/about">About Us</SbLink>

With Custom Content

<SbLink Href="/profile">
    <SbStack Direction="SbStackDirection.Row" Gap="1" Align="SbAlign.Center">
        <SbIcon Name="user" Size="SbSize.Sm" />
        <span>View Profile</span>
    </SbStack>
</SbLink>

CSS Classes

• sb-link - Base class
• sb-link--primary - Primary color
• sb-link--secondary - Secondary color
• sb-link--success - Success color
• sb-link--warning - Warning color
• sb-link--danger - Danger color
• sb-link--info - Info color
• sb-link--muted - Muted color
• sb-link--default - Default color
• sb-link--underline-always - Always show underline
• sb-link--underline-hover - Underline on hover
• sb-link--underline-none - No underline
• sb-link--disabled - Disabled state
• sb-link--external - External link styling

Accessibility

• Uses native <a> element
• aria-disabled set when disabled
• tabindex="-1" when disabled to remove from tab order
• rel="noopener noreferrer" automatically added for external links and target="_blank"
• External link indicator is hidden from screen readers

Examples

Basic Usage

<SbLink Href="/home">Go Home</SbLink>

External Link

<SbLink Href="https://github.com" External="true" Target="_blank">
    GitHub
</SbLink>

Colors

<SbStack Direction="SbStackDirection.Row" Gap="4">
    <SbLink Href="#" Color="SbColor.Primary">Primary</SbLink>
    <SbLink Href="#" Color="SbColor.Secondary">Secondary</SbLink>
    <SbLink Href="#" Color="SbColor.Success">Success</SbLink>
    <SbLink Href="#" Color="SbColor.Danger">Danger</SbLink>
    <SbLink Href="#" Color="SbColor.Muted">Muted</SbLink>
</SbStack>

Underline Styles

<SbStack Direction="SbStackDirection.Row" Gap="4">
    <SbLink Href="#" Underline="SbLinkUnderline.Always">Always Underlined</SbLink>
    <SbLink Href="#" Underline="SbLinkUnderline.Hover">Underline on Hover</SbLink>
    <SbLink Href="#" Underline="SbLinkUnderline.None">No Underline</SbLink>
</SbStack>

Disabled Link

<SbLink Href="/admin" Disabled="true">
    Admin (Restricted)
</SbLink>

In Text

<SbText>
    For more information, please visit our 
    <SbLink Href="/help">help center</SbLink> or 
    <SbLink Href="/contact">contact us</SbLink>.
</SbText>

With Click Handler

<SbLink Href="#" OnClick="HandleLinkClick">
    Click me to track
</SbLink>

@code {
    private void HandleLinkClick(MouseEventArgs args)
    {
        // Track click analytics
    }
}