TapAreaLink is mainly used as navigational element
Props
Localization
Localize the accessibilityLabel.
Usage guidelines
See TapArea.
Variants
See TapArea for more variants.
Compress behavior
import { useState } from 'react'; import { Box, Flex, Image, Label, Mask, Switch, TapAreaLink, Text, } from 'gestalt'; export default function Example() { const [disabled, setDisabled] = useState(false); const [compressed, setCompressed] = useState('compress'); const [tabIndex, setTabIndex] = useState(false); return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex alignItems="start" direction="column" gap={{ column: 6, row: 0 }}> <Flex gap={6} wrap> <TapAreaLink tapStyle={compressed} disabled={disabled} 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> </TapAreaLink> </Flex> <Flex gap={{ column: 0, row: 2 }}> <Switch onChange={() => setCompressed(compressed === 'compress' ? 'none' : 'compress') } id="compress-buttons" switched={compressed === 'compress'} /> <Box paddingX={2} flex="grow"> <Label htmlFor="compress-buttons"> <Text>Compress TapArea</Text> </Label> </Box> </Flex> <Flex gap={{ column: 0, row: 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={{ column: 0, row: 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> </Box> ); }
Height & width
import { Box, Flex, TapAreaLink, Text } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Flex gap={6} wrap maxWidth={500} height={250}> <Box borderStyle="sm" margin={3} width="100%" height="100%"> <TapAreaLink href="www.pinterest.com" onTap={({ event }) => event.stopPropagation()} fullHeight > <Box height="100%" color="secondary"> <Text align="center">Full parent height</Text> </Box> </TapAreaLink> </Box> <Box borderStyle="sm" margin={3} width="100%" height="100%"> <TapAreaLink href="www.pinterest.com" onTap={({ event }) => event.stopPropagation()} > <Box height="100%" color="secondary"> <Text align="center">Child height only</Text> </Box> </TapAreaLink> </Box> </Flex> </Box> ); }
Inline usage
import { Box, Flex, TapAreaLink, Text } from 'gestalt'; export default function Example() { return ( <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center" > <Box color="warningBase" height={250} padding={3} maxWidth={500}> <Flex direction="column" gap={{ column: 6, row: 0 }}> <Flex.Item> <Text color="inverse" inline> Other content </Text> <Box borderStyle="sm" margin={3} column={6}> <TapAreaLink href="www.pinterest.com" onTap={({ event }) => event.stopPropagation()} > <Box height="100%" color="secondary"> <Text align="center">Default behavior (block)</Text> </Box> </TapAreaLink> </Box> </Flex.Item> <Flex.Item> <Text color="inverse" inline> Other content </Text> <Box borderStyle="sm" display="inlineBlock" margin={3} column={6}> <TapAreaLink href="www.pinterest.com" onTap={({ event }) => event.stopPropagation()} > <Box height="100%" color="secondary"> <Text align="center">Inline behavior</Text> </Box> </TapAreaLink> </Box> </Flex.Item> </Flex> </Box> </Box> ); }
While TapArea doesn't provide an inline
prop, this behavior can be achieved by wrapping with <Box display="inlineBlock">
.
Mouse cursor
import { Box, Flex, TapAreaLink, Text } from 'gestalt'; export default function TapAreaExample() { return ( <Flex wrap gap={2}> {[ 'copy', 'grab', 'grabbing', 'move', 'noDrop', 'pointer', 'zoomIn', 'zoomOut', ].map((cursor) => ( <TapAreaLink href="www.pinterest.com" onTap={({ event }) => event.stopPropagation()} key={cursor} mouseCursor={cursor} fullWidth={false} > <Box borderStyle="lg" padding={4} width={250} height={100}> <Text size="200">hover here </Text> <Text size="200" weight="bold"> {`mouseCursor="${cursor}"`} </Text> </Box> </TapAreaLink> ))} </Flex> ); }
Rounding
In ordee to observe TapArea's border radius, focus on each component below navigating with the keyboard. fullWidth={false}
might be required to wrap to the children component. Make the sure the children components match the rounding as well.
External handlers
TapAreaLink consumes external handlers from GlobalEventsHandlerProvider.
Handlers:
- onNavigation: executed when TapAreaLink is clicked
See GlobalEventsHandlerProvider for more information.
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. |
Related
GlobalEventsHandlerProvider
GlobalEventsHandlerProvider allows external link navigation control across all children components with link behavior.
See GlobalEventsHandlerProvider to learn more about link navigation.