Button Link CSS Component

Default Button Link

Use the button-link class on an anchor tag to create a minimal, default button-link.

<a class="button-link" href="https://www.ebay.com"> Link </a>

Use the large modifier to increase the size of the button-link.

<a class="button-link button-link--large" href="https://www.ebay.com">
  Large Link
</a>

Use the small modifier to decrease the size of the button-link.

<a class="button-link button-link--small" href="https://www.ebay.com">
  Small Link
</a>

Primary Button Link

Use the primary modifier to create a primary button-link style.

<a class="button-link button-link--primary" href="https://www.ebay.com">
  Link
</a>

Secondary Button Link

Use the secondary modifier to create a secondary button-link style.

<a class="button-link button-link--secondary" href="https://www.ebay.com">
  Link
</a>

Tertiary Button Link

Use the tertiary modifier to create a tertiary button-link style.

<a class="button-link button-link--tertiary" href="https://www.ebay.com">
  Link
</a>

Disabled Button Link

Remove the href attribute to fully disable a button-link.

<a class="button-link button-link--primary"> Primary Link </a>
<a class="button-link button-link--secondary"> Secondary Link </a>
<a class="button-link button-link--tertiary"> Tertiary Link </a>

Partially Disabled Button Link

Use aria-disabled="true" to partially disable a button-link. This retains keyboard focus while still communicating a disabled state, preventing keyboard focus from being moved back to the start of the page when focus is lost. Unlike removing href, this variant must also be prevented from navigating via JavaScript.

<a
  class="button-link button-link--primary"
  href="https://www.ebay.com"
  aria-disabled="true"
>
  Link
</a>

Destructive Button Link

Use the destructive modifier to create a destructive button-link style used for removing data.

Primary Destructive Button Link

<a
  class="button-link button-link--primary button-link--destructive"
  href="https://www.ebay.com"
>
  Destructive Link
</a>

Secondary Destructive Button Link

<a
  class="button-link button-link--secondary button-link--destructive"
  href="https://www.ebay.com"
>
  Secondary Link
</a>

Tertiary Destructive Button Link

<a
  class="button-link button-link--tertiary button-link--destructive"
  href="https://www.ebay.com"
>
  Tertiary Link
</a>

Adjacent Icon Button Link

Any SVG icon can be placed adjacent to the button-link text. To flip position of text and icon, simply swap the DOM order.

<a class="button-link button-link--primary" href="https://www.ebay.com">
  <span class="button-link__cell">
    <svg aria-hidden="true" class="icon icon--24" height="16" width="16">
      <use href="#icon-menu-24" />
    </svg>
    <span> Link </span>
  </span>
</a>

Fluid Button Link

Use the button-link--fluid modifier to make a button-link fill the width of its container.

<a
  class="button-link button-link--primary button-link--fluid"
  href="https://www.ebay.com"
>
  Link
</a>

Fixed Width Button Link

Button links naturally grow wider with their text. The text will wrap naturally once the button-link width grows to exceed its constrained width.

<a
  class="button-link button-link--primary"
  href="https://www.ebay.com"
  style="width: 200px"
>
  Link with a lot of text that will wrap
</a>

The solution is to apply truncation, via the button-link--truncated or button-link--large-truncated modifiers, combined with a fixed height.

<a
  class="button-link button-link--primary button-link--large-fixed-height button-link--truncated"
  href="https://www.ebay.com"
  style="width: 200px"
>
  Link with a lot of text that will wrap
</a>