TapArea

TapArea allows components to be clickable and touchable in an accessible way.

Props

Name	Type	Default
`children` Required	`React.Node`	-
	TapArea is a wrapper around non-button components (or children) that provides clicking / touching functionality as if they were a unified button area.
`accessibilityControls`	`string`	-
	Specify the `id` of an associated element (or elements) whose contents or visibility are controlled by a button component so that screen reader users can identify the relationship between elements. Optional with button-role. Accessibility: It populates aria-controls.
`accessibilityExpanded`	`boolean`	-
	Indicate that a button component hides or exposes collapsible components and expose whether they are currently expanded or collapsed. Optional with button-role. Accessibility: It populates aria-expanded.
`accessibilityHaspopup`	`boolean`	-
	Indicate that a button component controls the appearance of interactive popup elements, such as menu or dialog. Optional with button-role. Accessibility: It populates aria-haspopup.
`accessibilityLabel`	`string`	-
	Supply a short, descriptive label for screen-readers to replace TapArea texts that do not provide sufficient context about the button component behavior. Accessibility: It populates aria-label.
`disabled`	`boolean`	-
	Set disabled state so TapArea cannot be interacted with and actions are not available.
`fullHeight`	`boolean`	-
	Set the TapArea height to expand to the full height of the parent.
`fullWidth`	`boolean`	`true`
	Set the TapArea width to expand to the full width of the parent.
`href`	`string`	-
	Specify a link URL. Required with role=link.
`mouseCursor`	`"copy" \| "grab" \| "grabbing" \| "move" \| "noDrop" \| "pointer" \| "zoomIn" \| "zoomOut"`	`"pointer"`
	Select a mouse cursor type to convey the TapArea expected behavior .
`onBlur`	`({ event: SyntheticFocusEvent<HTMLDivElement> \| SyntheticFocusEvent<HTMLAnchorElement> }) => void`	-
	Callback fired when a TapArea component loses focus.
`onFocus`	`({ event: SyntheticFocusEvent<HTMLDivElement> \| SyntheticFocusEvent<HTMLAnchorElement> }) => void`	-
	Callback fired when a TapArea component gets focus via keyboard navigation, mouse click (pressed), or focus method
`onMouseDown`	`({ event: SyntheticMouseEvent<HTMLDivElement> \| SyntheticMouseEvent<HTMLAnchorElement>, {\| disableOnNavigation: () => void \|}> }) => void`	-
	Callback fired when a click event begins.
`onMouseEnter`	`({ event: SyntheticMouseEvent<HTMLDivElement> \| SyntheticMouseEvent<HTMLAnchorElement>, {\| disableOnNavigation: () => void \|}> }) => void`	-
	Callback fired when a mouse pointer moves onto a TapArea component.
`onMouseLeave`	`({ event: SyntheticMouseEvent<HTMLDivElement> \| SyntheticMouseEvent<HTMLAnchorElement> }) => void`	-
	Callback fired when a mouse pointer moves out a TapArea component.
`onMouseUp`	`({ event: SyntheticMouseEvent<HTMLDivElement> \| SyntheticMouseEvent<HTMLAnchorElement> }) => void`	-
	Callback fired when a click event ends.
`onTap`	`({ event: SyntheticMouseEvent<HTMLDivElement> \| SyntheticKeyboardEvent<HTMLDivElement> \| SyntheticMouseEvent<HTMLAnchorElement> \| SyntheticKeyboardEvent<HTMLAnchorElement>, {\| disableOnNavigation: () => void \|}> }) }) => void`	-
	Callback fired when a TapArea component is clicked (pressed and released) with a mouse or keyboard. Required with button-role + button-type buttons. See custom navigation variant for examples.
`ref`	`React.Ref<"div"> \| React.Ref<"a">`	-
	Forward the ref to the underlying div or anchor element.
`rel`	`"none" \| "nofollow"`	`"none"`
	Optional with role=link.
`role`	`"button" \| "link"`	`"button"`
	Select a TapArea variant: 'button': Use for TapArea to act like buttons. The TapArea is rendered as a `<div>`. 'link': Use for TapArea to act like links. The button is rendered as an `<a>`. Required with role=link.
`rounding`	`"pill" \| "circle" \| 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8`	-
	Sets a border radius for the TapArea. Select a rounding option that aligns with its children. Options are "circle" or "pill" for fully rounded corners or 0-8 representing the radius in boints.
`tabIndex`	`-1 \| 0`	`0`
	Remove the component from sequential keyboard navigation to improve accessibility. The component is not focusable with keyboard navigation but it can be focused with Javascript or visually by clicking with the mouse. The default behaviour for the component is to be focusable in sequential keyboard navigation in the order defined by the document's source order. If component is disabled, the component is also unreachable from keyboard navigation.
`tapStyle`	`none \| "compress"`	`"none"`
	Set a compressing behavior when the TapArea is clicked / touched. 'none' does not compress TapArea. 'compress' scales down TapArea.
`target`	`null \| "self" \| "blank"`	`"null"`
	Define the frame or window to open the anchor defined on `href`: 'null' opens the anchor in the same window. 'blank' opens the anchor in a new window. 'self' opens an anchor in the same frame. Optional with role=link.

Basic TapArea

Alberto's Profile

function TapAreaExample() {
  return (
    <Box rounding={4} borderStyle="sm" width={170}>
      <TapArea rounding={4}>
        <Box
          alignItems="center"
          direction="column"
          display="flex"
          padding={3}
        >
          <Avatar
            name="Alberto"
            size="xl"
            src="https://i.ibb.co/NsK2w5y/Alberto.jpg"
            verified
          />
          <Text weight="bold">Alberto's Profile</Text>
        </Box>
      </TapArea>
    </Box>
  );
}

function TapAreaExample() {
  return (
    <Box rounding={4} borderStyle="sm" width={170}>
      <TapArea rounding={4}>
        <Box
          alignItems="center"
          direction="column"
          display="flex"
          padding={3}
        >
          <Avatar
            name="Alberto"
            size="xl"
            src="https://i.ibb.co/NsK2w5y/Alberto.jpg"
            verified
          />
          <Text weight="bold">Alberto's Profile</Text>
        </Box>
      </TapArea>
    </Box>
  );
}

TapArea with Link/Buttons

If you have a Link or Button inside of TapArea, you can apply e.stopPropagation() so the onTap doesn't get triggered.

Find More on Pinterest

Touched 0 times

function TapAreaExample() {
  const [touches, setTouches] = React.useState(0);

  return (
    <Box width={200}>
      <TapArea
        onTap={() => setTouches(touches + 1)}
        rounding={2}
      >
        <Box color="darkGray" rounding={4} borderStyle="sm">
          <Mask rounding={2}>
            <Image
              alt="Antelope Canyon"
              naturalHeight={1}
              naturalWidth={1}
              src="https://i.ibb.co/DwYrGy6/stock14.jpg"
            />
          </Mask>
          <Box paddingY={2}>
            <Link
              href="https://www.pinterest.com/search/pins/?rs=ac&len=2&q=antelope%20canyon%20arizona&eq=Antelope%20Canyon"
              onClick={({ event }) => event.stopPropagation()}
              rounding="pill"
              target="blank"
            >
              <Text align="center" color="white">Find More on Pinterest</Text>
            </Link>
          </Box>
        </Box>
      </TapArea>
      <Box paddingY={2}>
        <Text color="gray" align="center">
          Touched {touches} {touches === 1 ? 'time' : 'times'}
        </Text>
      </Box>
    </Box>  );
}

function TapAreaExample() {
  const [touches, setTouches] = React.useState(0);
  return (
    <Box width={200}>
      <TapArea
        onTap={() => setTouches(touches + 1)}
        rounding={2}
      >
        <Box color="darkGray" rounding={4} borderStyle="sm">
          <Mask rounding={2}>
            <Image
              alt="Antelope Canyon"
              naturalHeight={1}
              naturalWidth={1}
              src="https://i.ibb.co/DwYrGy6/stock14.jpg"
            />
          </Mask>
          <Box paddingY={2}>
            <Link
              href="https://www.pinterest.com/search/pins/?rs=ac&len=2&q=antelope%20canyon%20arizona&eq=Antelope%20Canyon"
              onClick={({ event }) => event.stopPropagation()}
              rounding="pill"
              target="blank"
            >
              <Text align="center" color="white">Find More on Pinterest</Text>
            </Link>
          </Box>
        </Box>
      </TapArea>
      <Box paddingY={2}>
        <Text color="gray" align="center">
          Touched {touches} {touches === 1 ? 'time' : 'times'}
        </Text>
      </Box>
    </Box>  );
}

Roles & Compress Behavior

Touched 0 times

Visit Pinterest.com

Compress TapArea

Disable TapArea

Remove from keyboard navigation with tabIndex

function Example() {
  const [disabled, setDisabled] = React.useState(false);
  const [compressed, setCompressed] = React.useState('compress');
  const [touches, setTouches] = React.useState(0);
  const [tabIndex, setTabIndex] = React.useState(false);

  return (
    <Flex alignItems="start" direction="column" gap={6}>
      <Flex gap={6}>
        <Tooltip text="Default TapArea">
          <TapArea
            tapStyle={compressed}
            disabled={disabled}
            onTap={() => setTouches(touches + 1)}
            tabIndex={tabIndex ? -1 : 0}
          >
            <Box padding={3} column={12} borderStyle="lg" width={200}>
              <Mask rounding={2}>
                <Image
                  alt="Antelope Canyon"
                  naturalHeight={1}
                  naturalWidth={1}
                  src="https://i.ibb.co/DwYrGy6/stock14.jpg"
                />
              </Mask>
              <Text align="center">Touched {touches} {touches === 1 ? 'time' : 'times'}</Text>
            </Box>
          </TapArea>
        </Tooltip>
        <Tooltip text="Link TapArea">
          <TapArea
            tapStyle={compressed}
            disabled={disabled}
            role="link"
            target="blank"
            href="https://www.pinterest.com"
            tabIndex={tabIndex ? -1 : 0}
          >
            <Box padding={3} column={12} borderStyle="lg" width={200}>
              <Mask rounding={2}>
                <Image
                  alt="Antelope Canyon"
                  naturalHeight={1}
                  naturalWidth={1}
                  src="https://i.ibb.co/DwYrGy6/stock14.jpg"
                />
              </Mask>
              <Text align="center">Visit Pinterest.com</Text>
            </Box>
          </TapArea>
        </Tooltip>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setCompressed(compressed === "compress" ? "none" : "compress")}
          id="compress-buttons"
          switched={compressed === "compress" ? true : false }
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="compress-buttons">
            <Text>Compress TapArea</Text>
          </Label>
        </Box>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setDisabled(!disabled)}
          id="disable-buttons"
          switched={disabled}
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="disable-buttons">
            <Text>Disable TapArea</Text>
          </Label>
        </Box>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setTabIndex(!tabIndex)}
          id="unreachable-buttons"
          switched={tabIndex}
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="unreachable-buttons">
            <Text>Remove from keyboard navigation with tabIndex</Text>
          </Label>
        </Box>
      </Flex>
    </Flex>
  );
}

function Example() {
  const [disabled, setDisabled] = React.useState(false);
  const [compressed, setCompressed] = React.useState('compress');
  const [touches, setTouches] = React.useState(0);
  const [tabIndex, setTabIndex] = React.useState(false);
  return (
    <Flex alignItems="start" direction="column" gap={6}>
      <Flex gap={6}>
        <Tooltip text="Default TapArea">
          <TapArea
            tapStyle={compressed}
            disabled={disabled}
            onTap={() => setTouches(touches + 1)}
            tabIndex={tabIndex ? -1 : 0}
          >
            <Box padding={3} column={12} borderStyle="lg" width={200}>
              <Mask rounding={2}>
                <Image
                  alt="Antelope Canyon"
                  naturalHeight={1}
                  naturalWidth={1}
                  src="https://i.ibb.co/DwYrGy6/stock14.jpg"
                />
              </Mask>
              <Text align="center">Touched {touches} {touches === 1 ? 'time' : 'times'}</Text>
            </Box>
          </TapArea>
        </Tooltip>
        <Tooltip text="Link TapArea">
          <TapArea
            tapStyle={compressed}
            disabled={disabled}
            role="link"
            target="blank"
            href="https://www.pinterest.com"
            tabIndex={tabIndex ? -1 : 0}
          >
            <Box padding={3} column={12} borderStyle="lg" width={200}>
              <Mask rounding={2}>
                <Image
                  alt="Antelope Canyon"
                  naturalHeight={1}
                  naturalWidth={1}
                  src="https://i.ibb.co/DwYrGy6/stock14.jpg"
                />
              </Mask>
              <Text align="center">Visit Pinterest.com</Text>
            </Box>
          </TapArea>
        </Tooltip>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setCompressed(compressed === "compress" ? "none" : "compress")}
          id="compress-buttons"
          switched={compressed === "compress" ? true : false }
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="compress-buttons">
            <Text>Compress TapArea</Text>
          </Label>
        </Box>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setDisabled(!disabled)}
          id="disable-buttons"
          switched={disabled}
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="disable-buttons">
            <Text>Disable TapArea</Text>
          </Label>
        </Box>
      </Flex>
      <Flex gap={2}>
        <Switch
          onChange={() => setTabIndex(!tabIndex)}
          id="unreachable-buttons"
          switched={tabIndex}
        />
        <Box paddingX={2} flex="grow">
          <Label htmlFor="unreachable-buttons">
            <Text>Remove from keyboard navigation with tabIndex</Text>
          </Label>
        </Box>
      </Flex>
    </Flex>
  );
}

Height & Width

Full parent height

Child height only

<Box color="olive" display="flex" width={500} height={250}>
  <Box borderStyle="sm" margin={3} column={6}>
    <TapArea fullHeight>
      <Box height="100%" color="lightGray">
        <Text align="center">
          Full parent height
        </Text>
      </Box>
    </TapArea>
  </Box>
  <Box borderStyle="sm" margin={3} column={6}>
    <TapArea>
      <Box height="100%" color="lightGray">
        <Text align="center">
          Child height only
        </Text>
      </Box>
    </TapArea>
  </Box>
</Box>

<Box color="olive" display="flex" width={500} height={250}>
  <Box borderStyle="sm" margin={3} column={6}>
    <TapArea fullHeight>
      <Box height="100%" color="lightGray">
        <Text align="center">
          Full parent height
        </Text>
      </Box>
    </TapArea>
  </Box>
  <Box borderStyle="sm" margin={3} column={6}>
    <TapArea>
      <Box height="100%" color="lightGray">
        <Text align="center">
          Child height only
        </Text>
      </Box>
    </TapArea>
  </Box>
</Box>

Mouse Cursor

mouseCursor="copy"

copy

mouseCursor="grab"

grab

mouseCursor="grabbing"

grabbing

mouseCursor="move"

move

mouseCursor="noDrop"

noDrop

mouseCursor="pointer"

pointer

mouseCursor="zoomIn"

zoomIn

mouseCursor="zoomOut"

zoomOut

Rounding

rounding={0}

rounding={1}

rounding={2}

rounding={3}

rounding={4}

rounding={5}

rounding={6}

rounding={7}

rounding={8}

rounding="circle"

circle

rounding="pill"

pill

ref

TapArea is focused 0 times

function TapAreaRefExample() {
  const ref = React.useRef();
  const [focus, setFocus] = React.useState(0);

  return (
    <Flex gap={2}>
      <Button
        text="Focus the TapArea"
        onClick={() => ref.current.focus()}
      />
      <TapArea
        ref={ref}
        rounding="pill"
        onFocus={() => setFocus(focus + 1)}
      >
        <Box
          borderStyle="sm"
          padding={2}
          rounding="pill"
        >
          <Text>TapArea is focused {focus} times</Text>
        </Box>
      </TapArea>
    </Flex>
  );
}

function TapAreaRefExample() {
  const ref = React.useRef();
  const [focus, setFocus] = React.useState(0);
  return (
    <Flex gap={2}>
      <Button
        text="Focus the TapArea"
        onClick={() => ref.current.focus()}
      />
      <TapArea
        ref={ref}
        rounding="pill"
        onFocus={() => setFocus(focus + 1)}
      >
        <Box
          borderStyle="sm"
          padding={2}
          rounding="pill"
        >
          <Text>TapArea is focused {focus} times</Text>
        </Box>
      </TapArea>
    </Flex>
  );
}

Accessibility: label, controls, expanded, & popup

function MenuButtonExample() {
  const [selected, setSelected] = React.useState(false);
  const anchorRef = React.useRef();

  return (
    <React.Fragment>
        <TapArea
          accessibilityLabel="Open the options menu"
          accessibilityControls="menu"
          accessibilityExpanded={selected}
          accessibilityHaspopup
          onTap={() => setSelected(!selected)}
        >
          <Box
            ref={anchorRef}
            borderStyle="sm"
            display="inlineBlock"
            alignItems="center"
            rounding={1}
            padding={2}
          >
            <Flex gap={2}>
              <Box height={50} width={50}>
                <Mask rounding={1}>
                  <Image
                    alt="Antelope Canyon"
                    naturalHeight={1}
                    naturalWidth={1}
                    src="https://i.ibb.co/FY2MKr5/stock6.jpg"
                  />
                </Mask>
              </Box>
              <Text weight="bold" align="center">Menu</Text>
            </Flex>
          </Box>
      </TapArea>
      {selected && (
        <Layer>
          <Popover
            anchor={anchorRef.current}
            idealDirection="down"
            onDismiss={() => setSelected(false)}
            positionRelativeToAnchor={false}
            size="md"
          >
            <Box id="menu" direction="column" display="flex" padding={2}>
              <Box padding={2}>
                <Text weight="bold">
                  Option 1
                </Text>
              </Box>
              <Box padding={2}>
                <Text weight="bold">
                  Option 2
                </Text>
              </Box>
            </Box>
          </Popover>
        </Layer>
      )}
    </React.Fragment>
  );
}

function MenuButtonExample() {
  const [selected, setSelected] = React.useState(false);
  const anchorRef = React.useRef();
  return (
    <React.Fragment>
        <TapArea
          accessibilityLabel="Open the options menu"
          accessibilityControls="menu"
          accessibilityExpanded={selected}
          accessibilityHaspopup
          onTap={() => setSelected(!selected)}
        >
          <Box
            ref={anchorRef}
            borderStyle="sm"
            display="inlineBlock"
            alignItems="center"
            rounding={1}
            padding={2}
          >
            <Flex gap={2}>
              <Box height={50} width={50}>
                <Mask rounding={1}>
                  <Image
                    alt="Antelope Canyon"
                    naturalHeight={1}
                    naturalWidth={1}
                    src="https://i.ibb.co/FY2MKr5/stock6.jpg"
                  />
                </Mask>
              </Box>
              <Text weight="bold" align="center">Menu</Text>
            </Flex>
          </Box>
      </TapArea>
      {selected && (
        <Layer>
          <Popover
            anchor={anchorRef.current}
            idealDirection="down"
            onDismiss={() => setSelected(false)}
            positionRelativeToAnchor={false}
            size="md"
          >
            <Box id="menu" direction="column" display="flex" padding={2}>
              <Box padding={2}>
                <Text weight="bold">
                  Option 1
                </Text>
              </Box>
              <Box padding={2}>
                <Text weight="bold">
                  Option 2
                </Text>
              </Box>
            </Box>
          </Popover>
        </Layer>
      )}
    </React.Fragment>
  );
}

Variants

This example illustrates two custom navigation implementations to externally control the link navigation behavior of TapArea: setting a default logic with OnLinkNavigationProvider and a custom component logic with the onClick prop.

If onNavigation prop is passed to OnLinkNavigationProvider, it's passed down to all children links and sets a custom default link navigation behavior. onLinkNavigation is a higher-order function: it takes named arguments (href and target) and returns an event handler function. In the component's onClick event handler, the onClick prop gets called first, followed by the function passed down by the OnLinkNavigationProvider.

TapArea's onClick prop is an event handler function. This callback takes 2 named parameters: 'event', the 'onClick' event, and disableOnNavigation, a callback function that disables any default custom navigation logic set by OnLinkNavigationProvider. disableOnNavigation is only accessible in OnLinkNavigationProvider's children components with link behavior.

In this example, TapArea has a parent OnLinkNavigationProvider setting a default custom navigation logic. We can compare three navigation behaviors: (a) the default TapArea behavior (by disabling the OnLinkNavigationProvider's inherited logic), (b) the default custom behavior set by OnLinkNavigationProvider and (c) a custom behavior set on TapArea.

onClick is used to disable the default custom logic set in OnLinkNavigationProvider and implement custom behavior at the component level. disableOnNavigation and customOnNavigation are both called first during the 'onClick' event.

If onNavigation is a custom hook function, it can contain complex logic, including React hooks, to perform side effects.

In this example, both onNavigation and customOnNavigation functions execute the following actions:

Disable the default link behavior
Show an alert message
Open a different URL in a new window

Both onNavigationClick, inside onNavigation, and onClick have event access to preventDefault(). It could also be used to stopPropagation().

Navigation controller:

Default navigation (disabled custom navigation set on OnLinkNavigationProvider)

Custom navigation set on OnLinkNavigationProvider

Custom navigation set on TapArea

function OnNavigation() {
  const [onNavigationMode, setOnNavigationMode] = React.useState('provider_disabled');

  const onNavigation = ({ href,target }) => {
    const onNavigationClick = ({ event }) => {
      event.preventDefault();
      // eslint-disable-next-line no-alert
      alert('CUSTOM NAVIGATION set on <OnLinkNavigationProvider onNavigation/>. Disabled link: '+href+'. Opening business.pinterest.com instead.');
      window.open('https://business.pinterest.com', target === 'blank' ? '_blank' : '_self');
    }
    return onNavigationClick;
  }

  const customOnNavigation = () => {
    // eslint-disable-next-line no-alert
    alert('CUSTOM NAVIGATION set on <TapArea onTap/>. Disabled link: https://pinterest.com. Opening help.pinterest.com instead.');
    window.open('https://help.pinterest.com', '_blank');
  }

  const onTapHandler = ({ event, disableOnNavigation }) => {
    if (onNavigationMode === 'provider_disabled') {
      disableOnNavigation()
    } else if (onNavigationMode === 'link_custom') {
      event.preventDefault();
      disableOnNavigation();
      customOnNavigation();
    }
  }

  const linkProps = {
    href:"https://pinterest.com",
    onTap: onTapHandler,
    target:"blank",
  }

  return (
    <OnLinkNavigationProvider onNavigation={onNavigation}>
      <Flex direction="column" gap={2}>
        <Flex direction="column" gap={2}>
          <Text>Navigation controller:</Text>
            <RadioButton
              checked={onNavigationMode === 'provider_disabled'}
              id="provider_disabled"
              label="Default navigation (disabled custom navigation set on OnLinkNavigationProvider)"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_disabled')}
              value="provider_disabled"
            />
            <RadioButton
              checked={onNavigationMode === 'provider_custom'}
              id="provider_custom"
              label="Custom navigation set on OnLinkNavigationProvider"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_custom')}
              value="provider_custom"
            />
            <RadioButton
              checked={onNavigationMode === 'link_custom'}
              id="link_custom"
              label="Custom navigation set on TapArea"
              name="navigation"
              onChange={() => setOnNavigationMode('link_custom')}
              value="link_custom"
            />
          <Divider/>
        </Flex>
        <Box width={100}>
          <TapArea
            {...linkProps}
            role="link"
            rounding={2}
          >
            <Box color="darkGray" rounding={4} borderStyle="sm">
              <Mask rounding={2}>
                <Image
                  alt="Antelope Canyon"
                  naturalHeight={1}
                  naturalWidth={1}
                  src="https://i.ibb.co/DwYrGy6/stock14.jpg"
                />
              </Mask>
            </Box>
          </TapArea>
        </Box>
      </Flex>
    </OnLinkNavigationProvider>
  );
}

function OnNavigation() {
  const [onNavigationMode, setOnNavigationMode] = React.useState('provider_disabled');
  const onNavigation = ({ href,target }) => {
    const onNavigationClick = ({ event }) => {
      event.preventDefault();
      // eslint-disable-next-line no-alert
      alert('CUSTOM NAVIGATION set on <OnLinkNavigationProvider onNavigation/>. Disabled link: '+href+'. Opening business.pinterest.com instead.');
      window.open('https://business.pinterest.com', target === 'blank' ? '_blank' : '_self');
    }
    return onNavigationClick;
  }
  const customOnNavigation = () => {
    // eslint-disable-next-line no-alert
    alert('CUSTOM NAVIGATION set on <TapArea onTap/>. Disabled link: https://pinterest.com. Opening help.pinterest.com instead.');
    window.open('https://help.pinterest.com', '_blank');
  }
  const onTapHandler = ({ event, disableOnNavigation }) => {
    if (onNavigationMode === 'provider_disabled') {
      disableOnNavigation()
    } else if (onNavigationMode === 'link_custom') {
      event.preventDefault();
      disableOnNavigation();
      customOnNavigation();
    }
  }
  const linkProps = {
    href:"https://pinterest.com",
    onTap: onTapHandler,
    target:"blank",
  }
  return (
    <OnLinkNavigationProvider onNavigation={onNavigation}>
      <Flex direction="column" gap={2}>
        <Flex direction="column" gap={2}>
          <Text>Navigation controller:</Text>
            <RadioButton
              checked={onNavigationMode === 'provider_disabled'}
              id="provider_disabled"
              label="Default navigation (disabled custom navigation set on OnLinkNavigationProvider)"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_disabled')}
              value="provider_disabled"
            />
            <RadioButton
              checked={onNavigationMode === 'provider_custom'}
              id="provider_custom"
              label="Custom navigation set on OnLinkNavigationProvider"
              name="navigation"
              onChange={() => setOnNavigationMode('provider_custom')}
              value="provider_custom"
            />
            <RadioButton
              checked={onNavigationMode === 'link_custom'}
              id="link_custom"
              label="Custom navigation set on TapArea"
              name="navigation"
              onChange={() => setOnNavigationMode('link_custom')}
              value="link_custom"
            />
          <Divider/>
        </Flex>
        <Box width={100}>
          <TapArea
            {...linkProps}
            role="link"
            rounding={2}
          >
            <Box color="darkGray" rounding={4} borderStyle="sm">
              <Mask rounding={2}>
                <Image
                  alt="Antelope Canyon"
                  naturalHeight={1}
                  naturalWidth={1}
                  src="https://i.ibb.co/DwYrGy6/stock14.jpg"
                />
              </Mask>
            </Box>
          </TapArea>
        </Box>
      </Flex>
    </OnLinkNavigationProvider>
  );
}

OnLinkNavigationProvider
Provider allows external link navigation control across all children components with link behavior.
See custom navigation variant for examples.

Edit page on GitHub