IconButton

Transparent button for SVG icons

import { IconButton } from 'theme-ui'

<IconButton aria-label="Toggle dark mode">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width="24"
    height="24"
    fill="currentcolor">
    <circle
      r={11}
      cx={12}
      cy={12}
      fill="none"
      stroke="currentcolor"
      strokeWidth={2}
    />
  </svg>
</IconButton>
<IconButton aria-label="Toggle dark mode">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width="24"
    height="24"
    fill="currentcolor">
    <circle
      r={11}
      cx={12}
      cy={12}
      fill="none"
      stroke="currentcolor"
      strokeWidth={2}
    />
  </svg>
</IconButton>

Variants

IconButton variants can be defined in the theme.buttons object. By default the IconButton component will use styles defined in theme.buttons.icon.