typescriptchakra-ui

Typescript chakra-ui <Tag> clickable and mouse events


I have to modify an existing component, or creating a new component, that is similar to the that I already have, that is a chakra-ui component named Tag Chakra-ui TAG component, except for the fact that is clickable, that means that:

enter image description here

Here's the component that I have right now.

<Tag
    bgColor="gray.50"
    border="1px solid"
    borderColor="gray.400"
    fontSize="10px"
    p={1.5}
    size="sm"
 >
   {listElement?.name || 'Unnamed'}
</Tag>

If the question is not clear, let me know in the comments, and I will adjust.

enter image description here


Solution

  • const ClickableTag = ({ listElement }) => {
      const handleClick = () => {
        window.location.href = listElement.url;
      };
    
      return (
        <Tooltip label={listElement?.name || 'Unnamed'} aria-label="A tooltip">
          <Box
            as="button"
            onClick={handleClick}
            bgColor="gray.50"
            border="1px solid"
            borderColor="gray.400"
            fontSize="10px"
            p={1.5}
            size="sm"
            _hover={{ bgColor: 'gray.100' }}
            _focus={{ bgColor: 'gray.200' }}
            _active={{ bgColor: 'gray.300' }}
          >
            {listElement?.name || 'Unnamed'}
          </Box>
        </Tooltip>
      );
    };