Icon button

[lishine]

How would I create Icon button?

[tom-sherman]

Hi! Reakit provides a Button component that you can place an icon inside if you wish, such is the magic compos-ability of React! Here's one implementation

import Button from 'reakit/Button`
import searchIcon from './icons/search.svg'
import plusIcon from './icons/plus.svg'

const icons = {
  Search: searchIcon,
  Plus: plusIcon,
}

function IconButton({ icon }) {
  return <Button><img src={icons[icon]} alt={`${icon} icon`} /></Button>
}

[prbxr]

Yes, but svg has some accessability settings such as:
https://github.com/chakra-ui/chakra-ui/blob/develop/packages/button/src/icon-button.tsx

[tom-sherman]

Are you referring to the aria-hidden prop on the svg in combination with the aria-label prop on the Button?

That is probably more semantic for screenreader users and something that you could easily add to my example above.