LinkAction

LinkAction is a utility component that makes it easier to create accessible block links (or buttons).

import * as React from 'react';
import {
  Anchor,
  LinkAction,
  LinkBox,
  Surface,
  Text,
} from '@itwin/itwinui-react';

export default () => {
  return (
    <LinkBox as={Surface}>
      <Surface.Header>
        <Text as='h2' variant='subheading'>
          <LinkAction as={Anchor} href='https://www.example.com'>
            Stadium
          </LinkAction>
        </Text>
      </Surface.Header>
      <Surface.Body isPadded className='demo-surface-body'>
        National stadium in Singapore. Features landscape details and a metro
        station.
      </Surface.Body>
    </LinkBox>
  );
};

This component is useful in a wide range of situations when you need to increase the clickable area of an element (e.g. a card, a list item, etc.) without compromising semantics. This means you can keep the link text concise and still make the entire area clickable, even if it includes other elements or extra padding.

LinkAction is used internally in other components (Tile, ListItem, ExpandableBlock, etc.), and is also available for use in external components.

Usage

This component consists of two parts:

1. LinkBox: A wrapper component that makes the entire area clickable.
2. LinkAction: The actual link (or button) inside the wrapper.

<LinkBox>
  <LinkAction href='https://www.example.com'>Click me</LinkAction>
  <p>Content outside the link.</p>
</LinkBox>

Similar to the Anchor component, LinkAction supports the polymorphic as prop, which can be used to render a different link component (e.g. from a client-side router) or a "button" (e.g. when you want to trigger an action within the same page, rather than a page navigation).

Secondary actions

If your container includes other elements that should be clickable, you can either manually give them a higher z-index, or simply wrap them in nested LinkBoxes.

In the following example, clicking anywhere on the card will navigate to the primary link, but clicking on the secondary link will still navigate to the second link.

import * as React from 'react';
import { Anchor, LinkAction, LinkBox, Surface } from '@itwin/itwinui-react';

export default () => {
  return (
    <LinkBox as={Surface}>
      <Surface.Body isPadded>
        <LinkAction href='https://example.com'>Primary link</LinkAction>
        <LinkBox>
          <Anchor href='https://mdn.io'>Secondary link</Anchor>
        </LinkBox>
      </Surface.Body>
    </LinkBox>
  );
};

Technical explanation

The implementation of this component is based on the pseudo-content trick, which makes the LinkAction’s ::after pseudo-element expand to fill up all the available space of the LinkBox component. A side-effect of this is that the text inside the LinkBox will not be selectable, but this is usually not a problem.

When your container has a secondary action, wrapping it in a nested LinkBox gives it position: relative, which makes it appear on top of the pseudo-element and therefore receive the click event instead of the primary LinkAction.

Props