Tag

<Tag>Info</Tag>
<br /><br />
<Tag variant="success">Success</Tag>
<br /><br />
<Tag variant="warning">Warning</Tag>
<br /><br />
<Tag variant="error">Error</Tag>
<br /><br />
<Tag variant="archived">Archived</Tag>

() => {
  const [state, setState] = React.useState(false);

  const handleChange = (e) => {
    setState((state) => (state ? false : e.currentTarget));
  };

  return (
    <div>
      <Tag hasMenu open={Boolean(state)} onClick={handleChange}>
        Info
      </Tag>
      <Menu
        anchorEl={state}
        open={Boolean(state)}
        onClose={handleChange}
        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
        transformOrigin={{ horizontal: 'left', vertical: 'top' }}
      >
        <MenuItem onClick={handleChange}>Item 1</MenuItem>
        <MenuItem onClick={handleChange}>Item 2</MenuItem>
        <MenuItem onClick={handleChange}>Item 3</MenuItem>
      </Menu>
    </div>
  );
};