Link Button

Displays an HTML anchor element representing a button that can be used to navigate 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

<!-- 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 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.

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 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>

Input Group

Previous Page

Radio button

Allow users to select from a list of choices

On this page

UsageExamplesURLSizeIcon RightIcon LeftIcon OnlyAdditional attributes