Link Button

Render an anchor styled as a button for navigating to other URLs

<sa-button-link variant="ButtonVariant.Outline" href="#">
    <sa-icon name="tickets-plane"/>
    View Tickets
</sa-button-link>
<sa-button-link variant="ButtonVariant.Outline" size="ButtonSize.Icon" class="rounded-full" href="#" aria-label="Share">
    <sa-icon name="share"/>
</sa-button-link>

Usage

An <sa-button-link> renders an <a> styled as a button. Give it an href or one of the routing attributes below.

<sa-button-link>Proceed</sa-button-link>

Examples

URL

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

  1. You can use the href property to specify any valid URL as per the href property of the anchor element.
  2. 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.
<!-- Specify the URL via the href attribute -->
<sa-button-link variant="ButtonVariant.Outline" href="https://dotnet.microsoft.com/" target="_blank">
    .NET Home Page
</sa-button-link>
<!-- Specify the Razor Page to navigate to -->
<sa-button-link variant="ButtonVariant.Outline" asp-page="/Booking/Confirmation" asp-route-id="123">
    Booking Confirmation
</sa-button-link>
<!-- Specify the MVC Controller Action to navigate to -->
<sa-button-link variant="ButtonVariant.Outline" asp-controller="Booking" asp-action="Confirmation"
               asp-route-id="123">
    Booking Confirmation
</sa-button-link>

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.

Sizes and variants

Specify the size and variant using the size and variant attribute.

<div class="flex flex-wrap items-center gap-2">
    <sa-button-link size="ButtonSize.ExtraSmall">Default</sa-button-link>
    <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
        Secondary
    </sa-button-link>
    <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
        Outline
    </sa-button-link>
    <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
        Ghost
    </sa-button-link>
    <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
        Destructive
    </sa-button-link>
    <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
        Link
    </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button-link size="ButtonSize.Small">Default</sa-button-link>
    <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Secondary">
        Secondary
    </sa-button-link>
    <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Outline">
        Outline
    </sa-button-link>
    <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Ghost">
        Ghost
    </sa-button-link>
    <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Destructive">
        Destructive
    </sa-button-link>
    <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Link">
        Link
    </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button-link>Default</sa-button-link>
    <sa-button-link variant="ButtonVariant.Secondary">Secondary</sa-button-link>
    <sa-button-link variant="ButtonVariant.Outline">Outline</sa-button-link>
    <sa-button-link variant="ButtonVariant.Ghost">Ghost</sa-button-link>
    <sa-button-link variant="ButtonVariant.Destructive">Destructive</sa-button-link>
    <sa-button-link variant="ButtonVariant.Link">Link</sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
    <sa-button-link size="ButtonSize.Large">Default</sa-button-link>
    <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Secondary">
        Secondary
    </sa-button-link>
    <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Outline">
        Outline
    </sa-button-link>
    <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Ghost">
        Ghost
    </sa-button-link>
    <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Destructive">
        Destructive
    </sa-button-link>
    <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Link">
        Link
    </sa-button-link>
</div>

Icon right

Place an <sa-icon> after the label to show it on the right.

<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.ExtraSmall">
    Default
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.Small">
    Default
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link>
    Default
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.Large">
    Default
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Secondary">
    Secondary
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Outline">
    Outline
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Ghost">
    Ghost
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Destructive">
    Destructive
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Link">
    Link
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>

Icon left

Place the <sa-icon> before the label to show it on the left.

<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.ExtraSmall">
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button-link>
  <sa-button-link size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.Small">
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button-link>
  <sa-button-link size="ButtonSize.Small" variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link>
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button-link>
  <sa-button-link variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.Large">
    <sa-icon name="circle-arrow-left"/>
    Default
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Secondary">
    <sa-icon name="circle-arrow-left"/>
    Secondary
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Outline">
    <sa-icon name="circle-arrow-left"/>
    Outline
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Ghost">
    <sa-icon name="circle-arrow-left"/>
    Ghost
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Destructive">
    <sa-icon name="circle-arrow-left"/>
    Destructive
  </sa-button-link>
  <sa-button-link size="ButtonSize.Large" variant="ButtonVariant.Link">
    <sa-icon name="circle-arrow-left"/>
    Link
  </sa-button-link>
</div>

Icon only

Use one of the Icon* sizes for a square icon-only link, and give it an accessible name with aria-label or visually hidden text.

<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.IconExtraSmall" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.IconSmall" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconSmall" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconSmall" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconSmall" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconSmall" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconSmall" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.Icon" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Icon" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Icon" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Icon" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Icon" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.Icon" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>
<div class="flex flex-wrap items-center gap-2">
  <sa-button-link size="ButtonSize.IconLarge" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconLarge" variant="ButtonVariant.Secondary" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconLarge" variant="ButtonVariant.Outline" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconLarge" variant="ButtonVariant.Ghost" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconLarge" variant="ButtonVariant.Destructive" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
  <sa-button-link size="ButtonSize.IconLarge" variant="ButtonVariant.Link" aria-label="Next">
    <sa-icon name="arrow-right"/>
  </sa-button-link>
</div>

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-button-link variant="ButtonVariant.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-button-link>

Accessibility

<sa-button-link> renders an <a> element, so it is announced as a link and activated with Enter. Use it for navigation and use Button for actions. A link cannot be disabled, so render a button, or omit the link, when the destination is not available.

An icon-only link button has no accessible name. Give it one with aria-label, or add the text in a <span class="sr-only">.

API Reference

Renders an <a> element styled as a button.

Prop

Type

Routing attributes

The link button also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.

Prop

Type

Button Group

Group related buttons together into a single section

Avatar

An image element or initials representing the user.

On this page

UsageExamplesURLSizes and variantsIcon rightIcon leftIcon onlyAdditional attributesAccessibilityAPI Reference<sa-button-link>Routing attributes