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:
- The element I am referring, has a link
- I have the event “onHover” that shows me a tooltip with the name of the element
- I have the event “onFocus or “Press” that change the color of the tag
- I have the event “onClick” that brings me to the url of the element
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.
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>
);
};
-
The Tooltip component from Chakra-UI wraps the Box component to
display a tooltip on hover. -
The Box component is used as a button with as=”button”. This makes it
interactive and allows for various events like onClick, onHover,
onFocus, and onPress. Styling is applied to change the background
color on hover (_hover), focus (_focus), and active/press (_active)
states. Handle Click: -
The handleClick function changes the window.location.href to navigate
to the url of the listElement when the tag is clicked.
1