TapAreaLink is mainly used as navigational element

Complete documentation for TapAreaLink coming soon. See TapArea documentation page

Props

Component props
Name
Type
Default
children
Required
React.Node
-

TapAreaLink is a wrapper around non-button components (or children) that provides clicking / touching functionality as if they were a unified button area.

href
Required
string
-

Specify a link URL.

accessibilityCurrent
"page"
| "step"
| "location"
| "date"
| "time"
| "true"
| "false"
| "section"
-

For accessibility purposes. When you have a group of related elements with one element in the group styled differently from the others to indicate that this is the current element within its group, accessibilityCurrent should be used to inform the assistive technology user what has been indicated via styling.
Accessibility: It populates aria-current.

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.

dataTestId
string
-

Available for testing purposes, if needed. Consider better queries before using this prop.

disabled
boolean
false

Set disabled state so TapAreaLink cannot be interacted with and actions are not available.

fullHeight
boolean
-

Set the TapAreaLink height to expand to the full height of the parent.

fullWidth
boolean
true

Set the TapAreaLink width to expand to the full width of the parent.

mouseCursor
"copy" | "grab" | "grabbing" | "move" | "noDrop" | "pointer" | "zoomIn" | "zoomOut"
"pointer"

Select a mouse cursor type to convey the TapAreaLink expected behavior

onBlur
({|
  event: SyntheticFocusEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a TapAreaLink component loses focus

onFocus
({|
  event: SyntheticFocusEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a TapAreaLink component gets focus via keyboard navigation, mouse click (pressed), or focus method

onKeyDown
({|
  event: SyntheticKeyboardEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a keyboard key is pressed

onMouseDown
({|
  event: SyntheticMouseEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a click event begins

onMouseEnter
({|
  event: SyntheticMouseEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a mouse pointer moves onto a TapAreaLink component

onMouseLeave
({|
  event: SyntheticMouseEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a mouse pointer moves out a TapAreaLink component

onMouseUp
({|
  event: SyntheticMouseEvent<HTMLAnchorElement>,
|}) => void
-

Callback fired when a click event ends

onTap
({|
  event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>,
  dangerouslyDisableOnNavigation: () => void,
|}) => void
-

Callback fired when a TapAreaLink component is clicked (pressed and released) with a mouse or keyboard

rel
"none" | "nofollow"
"none"

Provides hints for SEO. See the MDN Web Docs to learn more

rounding
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | "circle" | "pill"
0

.

tabIndex
-1 | 0
0

Use "-1" to remove Button from keyboard navigation. See the Accessibility guidelines to learn more.

tapStyle
"none" | "compress"
"none"

Set a compressing behavior when the TapAreaLink is clicked / touched

  • 'none' does not compress TapArea.
  • 'compress' scales down TapArea.
target
null | "self" | "blank"
"null"

Indicates the browsing context where an href will be opened:

  • 'null' opens the anchor in the same window.
  • 'blank' opens the anchor in a new window.
  • 'self' opens an anchor in the same frame.

Usage guidelines

See TapArea.

Variants

See TapArea for more variants.

External handlers

TapAreaLink consumes external handlers from GlobalEventsHandlerProvider.

Handlers:

See GlobalEventsHandlerProvider for more information.

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Component does not respond to changing viewport sizes in web and mobile web.

GlobalEventsHandlerProvider
GlobalEventsHandlerProvider allows external link navigation control across all children components with link behavior.
See GlobalEventsHandlerProvider to learn more about link navigation.