Hide Button while using IconButton

I want to display Icon & allow it to be clickable which is why I need the IconButton component.

The problem comes when I need to show only icon but hide the button and I’m unable to do that.

Here’s the contents of my IconButton ⸺

import { Flex, IconButton } from '@chakra-ui/core'
import React from 'react'

export const CreateHabit = () => (
  <Flex
    width='220px'
    height='220px'
    borderRadius='40px'
    margin='0 16px'
    padding='0 16px'
    justify='center'
    flexWrap='wrap'
  >
    <IconButton
      onClick={() => alert('click')}
      icon='add'
      variant='unstyled'
      fontSize='300px'
    />
  </Flex>
)

And right now you can see how it looks ⸺

Notice the button’s outline above the add icon. I want to hide the button completely so that my icon will move up a bit in alignment 😃

[bawahakim]

For those still looking for a way to work with ally/tab

                 <IconButton
                        aria-label="Share Program"
                        icon={<LinkIcon boxSize={6} color="gray.400" />}
                        onClick={invitePeopleDisclosure.onOpen}
                        w="fit-content"
                        variant="ghost"
                      />

The secret is the variant and the fit-content

[segunadebayo]

I’d suggest you use the PseudoBox component to create that button.

<PseudoBox as="button" onClick={...}><Icon name="add"/></PseudoBox>

Let me know if this helps. If not, I’ll re-open the issue