Link Button

Displays an HTML anchor element representing a button that can be used to navigate to other URLs.

<sa-linkbutton variant="Outline" href="#">
    <sa-icon name="tickets-plane"/>
    View Tickets
</sa-linkbutton>
<sa-linkbutton variant="Outline" size="Icon" class="rounded-full" href="#">
    <sa-icon name="share"/>
</sa-linkbutton>

Usage

<sa-linkbutton>Proceed</sa-linkbutton>

Examples

URL

<!-- Specify the URL via the href attribute -->
<sa-linkbutton variant="Outline" href="https://dotnet.microsoft.com/" target="_blank">
    .NET Home Page
</sa-linkbutton>
<!-- Specify the Razor Page to navigate to -->
<sa-linkbutton variant="Outline" asp-page="/Booking/Confirmation" asp-route-id="123">
    Booking Confirmation
</sa-linkbutton>
<!-- Specify the MVC Controller Action to navigate to -->
<sa-linkbutton variant="Outline" asp-controller="Booking" asp-action="Confirmation" asp-route-id="123">
    Booking Confirmation
</sa-linkbutton>

The URL of a link button can be specified a couple of ways:

You can use the href property to specify any valid URL as per the href property of the anchor element.
You can use any of the attributes that are valid for specifying the URL for the ASP.NET Core Anchor Tag Helper, such as asp-controller, asp-action, asp-page, etc. Please refer to the Anchor Tag Helper documentation for more examples.

The same rules as for the AnchorTagHelper are applicable in that you cannot specify overlapping URL-related attributes. For example, if you specify an href attribute along with any of the asp-* attributes, an exception will be thrown. Likewise, if you specify an asp-controller attribute, as well as an asp-page attribute, an exception will be thrown.

Size

Specify the size using the size attribute.

<sa-linkbutton size="Small" variant="Outline" href="#">
    Small
</sa-linkbutton>
<sa-linkbutton variant="Outline" href="#">
    Default
</sa-linkbutton>
<sa-linkbutton size="Large" variant="Outline" href="#">
    Large
</sa-linkbutton>
<sa-linkbutton size="IconSmall" variant="Outline" href="#">
    <sa-icon name="share"/>
</sa-linkbutton>
<sa-linkbutton size="Icon" variant="Outline" href="#">
    <sa-icon name="share"/>
</sa-linkbutton>
<sa-linkbutton size="IconLarge" variant="Outline" href="#">
    <sa-icon name="share"/>
</sa-linkbutton>

Variant

Specify the variant using the variant attribute.

<sa-linkbutton href="#">Default</sa-linkbutton>
<sa-linkbutton variant="Outline" href="#">Outline</sa-linkbutton>
<sa-linkbutton variant="Destructive" href="#">Destructive</sa-linkbutton>
<sa-linkbutton variant="Ghost" href="#">Ghost</sa-linkbutton>
<sa-linkbutton variant="Link" href="#">Link</sa-linkbutton>

Icons

Add an icon to a link button using the <sa-icon> Tag Helper.

<sa-linkbutton variant="Outline" href="#">
    <sa-icon name="tickets-plane"/>
    Booking Confirmation
</sa-linkbutton>
<sa-linkbutton variant="Ghost" size="Icon" href="#">
    <sa-icon name="share" />
</sa-linkbutton>

Additional attributes

Since the Link Button Tag Helper is a wrapper around the HTML Anchor (<a>) element, you can use any of the Anchor element attributes.

<sa-linkbutton variant="Link" 
                href="https://dotnet.microsoft.com/" 
                target="_blank"
                class="hover:bg-linear-to-r hover:from-blue-500 hover:to-purple-500 hover:text-white"
                >
    .NET Home Page
</sa-linkbutton>