Link

Wraps an anchor element to add icons or margins.

Props

leadingIcon
GoAIconType
Icon displayed before the link text.
trailingIcon
GoAIconType
Icon displayed after the link text.
color
interactive | dark | light
Sets the color theme. 'interactive' for blue, 'dark' for black, 'light' for white text.
Defaults to interactive.
size
xsmall | small | medium | large
Sets the text size and corresponding icon size.
Defaults to medium.
testId
string
Sets a data-testid attribute for automated testing.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
 Examples

Restricted access (401)

.error-page-content {
  text-align: center;
}
.error-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-color: var(--goa-color-greyscale-100);
}
/* Icon scaled beyond xlarge (2.5rem cap) to match the page-scale visual weight. */
/* Tracked in icon-sizes-above-xlarge gap ticket. */
.error-page-icon goa-icon,
.error-page-icon goab-icon {
  transform: scale(1.35);
}
.error-page-underline {
  width: 6.875rem;
  height: var(--goa-space-xs);
  background-color: var(--goa-color-info-default);
}
<GoabPageBlock>
  <div className="error-page-content">
    <GoabBlock
      direction="column"
      alignment="center"
      gap="xl"
      width="100%"
      mt="3xl"
      mb="3xl"
    >
      <GoabBlock direction="column" alignment="center" gap="m" width="100%">
        <div className="error-page-icon">
          <GoabIcon role="presentation" type="warning" size="xlarge" />
        </div>
        <GoabText size="body-m" color="secondary" mt="none" mb="none">
          Error 401
        </GoabText>
        <div className="error-page-underline" aria-hidden="true" />
      </GoabBlock>

      <GoabBlock direction="column" alignment="center" gap="l" width="100%">
        <GoabText tag="h1" size="heading-l" mt="none" mb="none">
          Restricted access
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at{" "}
          <GoabLink>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </GoabLink>{" "}
          to request access.
        </GoabText>
      </GoabBlock>

      <GoabButton type="primary" size="compact" onClick={() => (window.location.href = "/")}>
        Go to home page
      </GoabButton>
    </GoabBlock>
  </div>
</GoabPageBlock>
goHome() {
  window.location.href = "/";
}
<goab-page-block>
  <div class="error-page-content">
    <goab-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goab-block direction="column" alignment="center" gap="m" width="100%">
        <div class="error-page-icon">
          <goab-icon role="presentation" type="warning" size="xlarge"></goab-icon>
        </div>
        <goab-text size="body-m" color="secondary" mt="none" mb="none">Error 401</goab-text>
        <div class="error-page-underline" aria-hidden="true"></div>
      </goab-block>

      <goab-block direction="column" alignment="center" gap="l" width="100%">
        <goab-text tag="h1" size="heading-l" mt="none" mb="none">Restricted access</goab-text>
        <goab-text size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at
          <goab-link>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </goab-link>
          to request access.
        </goab-text>
      </goab-block>

      <goab-button type="primary" size="compact" (onClick)="goHome()">Go to home page</goab-button>
    </goab-block>
  </div>
</goab-page-block>
<goa-page-block>
  <div style="text-align: center;">
    <goa-block direction="column" alignment="center" gap="xl" width="100%" mt="3xl" mb="3xl">
      <goa-block direction="column" alignment="center" gap="m" width="100%">
        <div
          style="display: flex; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background-color: var(--goa-color-greyscale-100);"
        >
          <goa-icon role="presentation" type="warning" size="xlarge" style="transform: scale(1.35);"></goa-icon>
        </div>
        <goa-text size="body-m" color="secondary" mt="none" mb="none">Error 401</goa-text>
        <div
          aria-hidden="true"
          style="width: 6.875rem; height: 0.5rem; background-color: var(--goa-color-info-default);"
        ></div>
      </goa-block>

      <goa-block direction="column" alignment="center" gap="l" width="100%">
        <goa-text as="h1" size="heading-l" mt="none" mb="none">Restricted access</goa-text>
        <goa-text size="body-m" mt="none" mb="none">
          We cannot provide access to this page without valid credentials. Please sign in or
          contact support at
          <goa-link>
            <a href="mailto:cs.licensingsupport@gov.ab.ca">cs.licensingsupport@gov.ab.ca</a>
          </goa-link>
          to request access.
        </goa-text>
      </goa-block>

      <goa-button version="2" type="primary" size="compact" onclick="window.location.href='/'">Go to home page</goa-button>
    </goa-block>
  </div>
</goa-page-block>

Uses a plain h1 as the page landmark. The decorative icon and accent bar are aria-hidden. The support email is a real mailto link inside GoabLink so keyboard users can activate it. No role="alert" is applied because the ARIA alert role is reserved for dynamically inserted messages.

Card grid

<GoabGrid gap="xl" minChildWidth="320px">
  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable
      housing with your organization.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Keep track of the individuals who are placed in lodges and may qualify for the
      Lodge Assistance Program subsidy.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Education Support</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic
      progress effortlessly.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Social Assistance</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access
      community resources.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </GoabText>
  </GoabContainer>

  <GoabContainer accent="thin" mb="none">
    <GoabLink size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </GoabLink>
    <GoabText mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report
      maintenance issues seamlessly.
    </GoabText>
  </GoabContainer>
</GoabGrid>
<goab-grid gap="xl" minChildWidth="320px">
  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable housing
      with your organization.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Keep track of the individuals who are placed in lodges and may qualify for the Lodge
      Assistance Program subsidy.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Education Support</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic progress
      effortlessly.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Social Assistance</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access
      community resources.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report maintenance
      issues seamlessly.
    </goab-text>
  </goab-container>
</goab-grid>
<goa-grid gap="xl" minchildwidth="320px">
  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable housing
      with your organization.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Keep track of the individuals who are placed in lodges and may qualify for the Lodge
      Assistance Program subsidy.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Education Support</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic progress
      effortlessly.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Social Assistance</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access
      community resources.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report maintenance
      issues seamlessly.
    </goa-text>
  </goa-container>
</goa-grid>

Link to an external page

<GoabLink trailingIcon="open">
  <a href="#external-url">External link</a>
</GoabLink>
<goab-link trailingIcon="open">
  <a href="#external-url">External link</a>
</goab-link>
<goa-link trailingicon="open">
  <a href="#external-url">External link</a>
</goa-link>

Types

Submit form

This distinction matters for screen reader users who expect different behaviors, keyboard navigation patterns, and browser history.

Do
Use a button for actions that trigger functionality (submit, save, cancel). Use a link for navigation to different pages or external websites.
Go to homepage
Don't
Don't use Button for simple navigation (use Link), toggling state (use Toggle or Checkbox), or minor utility functions (use Icon Button).

Icons

Tip
Use trailingIcon='open' for links that go to external sites so users know they're leaving the service.

Other

Tip
Use Link for navigation to other pages. Use Button for actions that change state or trigger functionality.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

Related components

Link Button

Button styled as a link for secondary actions.
View old component docs