Link Button

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

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

Usage

<dui-linkbutton>Proceed</dui-linkbutton>

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 -->
<dui-linkbutton variant="ButtonVariant.Outline" href="https://dotnet.microsoft.com/" target="_blank">
    .NET Home Page
</dui-linkbutton>
<!-- Specify the Razor Page to navigate to -->
<dui-linkbutton variant="ButtonVariant.Outline" asp-page="/Booking/Confirmation" asp-route-id="123">
    Booking Confirmation
</dui-linkbutton>
<!-- Specify the MVC Controller Action to navigate to -->
<dui-linkbutton variant="ButtonVariant.Outline" asp-controller="Booking" asp-action="Confirmation"
               asp-route-id="123">
    Booking Confirmation
</dui-linkbutton>

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">
    <dui-linkbutton size="ButtonSize.ExtraSmall">Default</dui-linkbutton>
    <dui-linkbutton size="ButtonSize.ExtraSmall" variant="ButtonVariant.Secondary">
        Secondary
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.ExtraSmall" variant="ButtonVariant.Outline">
        Outline
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.ExtraSmall" variant="ButtonVariant.Ghost">
        Ghost
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.ExtraSmall" variant="ButtonVariant.Destructive">
        Destructive
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.ExtraSmall" variant="ButtonVariant.Link">
        Link
    </dui-linkbutton>
</div>
<div class="flex flex-wrap items-center gap-2">
    <dui-linkbutton size="ButtonSize.Small">Default</dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Small" variant="ButtonVariant.Secondary">
        Secondary
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Small" variant="ButtonVariant.Outline">
        Outline
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Small" variant="ButtonVariant.Ghost">
        Ghost
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Small" variant="ButtonVariant.Destructive">
        Destructive
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Small" variant="ButtonVariant.Link">
        Link
    </dui-linkbutton>
</div>
<div class="flex flex-wrap items-center gap-2">
    <dui-linkbutton>Default</dui-linkbutton>
    <dui-linkbutton variant="ButtonVariant.Secondary">Secondary</dui-linkbutton>
    <dui-linkbutton variant="ButtonVariant.Outline">Outline</dui-linkbutton>
    <dui-linkbutton variant="ButtonVariant.Ghost">Ghost</dui-linkbutton>
    <dui-linkbutton variant="ButtonVariant.Destructive">Destructive</dui-linkbutton>
    <dui-linkbutton variant="ButtonVariant.Link">Link</dui-linkbutton>
</div>
<div class="flex flex-wrap items-center gap-2">
    <dui-linkbutton size="ButtonSize.Large">Default</dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Large" variant="ButtonVariant.Secondary">
        Secondary
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Large" variant="ButtonVariant.Outline">
        Outline
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Large" variant="ButtonVariant.Ghost">
        Ghost
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Large" variant="ButtonVariant.Destructive">
        Destructive
    </dui-linkbutton>
    <dui-linkbutton size="ButtonSize.Large" variant="ButtonVariant.Link">
        Link
    </dui-linkbutton>
</div>

Icon Right

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

Icon Left

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

Icon Only

<div class="flex flex-wrap items-center gap-2">
  <dui-linkbutton size="ButtonSize.IconExtraSmall">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Secondary">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Outline">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Ghost">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Destructive">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconExtraSmall" variant="ButtonVariant.Link">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
</div>
<div class="flex flex-wrap items-center gap-2">
  <dui-linkbutton size="ButtonSize.IconSmall">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconSmall" variant="ButtonVariant.Secondary">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconSmall" variant="ButtonVariant.Outline">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconSmall" variant="ButtonVariant.Ghost">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconSmall" variant="ButtonVariant.Destructive">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconSmall" variant="ButtonVariant.Link">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
</div>
<div class="flex flex-wrap items-center gap-2">
  <dui-linkbutton size="ButtonSize.Icon">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.Icon" variant="ButtonVariant.Secondary">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.Icon" variant="ButtonVariant.Outline">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.Icon" variant="ButtonVariant.Ghost">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.Icon" variant="ButtonVariant.Destructive">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.Icon" variant="ButtonVariant.Link">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
</div>
<div class="flex flex-wrap items-center gap-2">
  <dui-linkbutton size="ButtonSize.IconLarge">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconLarge" variant="ButtonVariant.Secondary">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconLarge" variant="ButtonVariant.Outline">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconLarge" variant="ButtonVariant.Ghost">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconLarge" variant="ButtonVariant.Destructive">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
  <dui-linkbutton size="ButtonSize.IconLarge" variant="ButtonVariant.Link">
    <dui-icon name="arrow-right"/>
  </dui-linkbutton>
</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.

<dui-linkbutton 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
</dui-linkbutton>

API Reference

<dui-linkbutton>

The <dui-linkbutton> tag helper renders an <a> element styled as a button. In addition to the attributes below, it forwards any standard <a> attributes (such as href, target, or rel) to the rendered element.

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 attributesAPI Reference<dui-linkbutton>Routing attributes