IconButton

As the name suggests, this component renders clickable icons. It has three props, one of them is the icon that should be clickable, another one is a function onClick and the third one is the label, which is used to define a string that labels the icon in order to make it accessible by any assistive technology.

<IconButton
  icon={<CloseIcon />}
  label="close"
  onClick={(e) => console.log("click", e)}
/>

Props

Button refs

If you need to apply a reference to the button element, then you can do so using the ref prop. This property has to be a function that takes the button reference as its single argument. It can return anything.

type ButtonRef = (node: HTMLButtonElement | null) => any;