Button

Primitive button component with variants

import { Button } from 'theme-ui'

<Button mr={2}>Beep</Button>
<Button variant='secondary'>Boop</Button>
<Button ml={2} hidden>Hidden</Button>
<Button mr={2}>Beep</Button>
<Button variant='secondary'>Boop</Button>
<Button ml={2} hidden>Hidden</Button>

Variants

Button variants can be defined in the theme.buttons object. The Button component uses theme.buttons.primary as its default variant style.

// example theme variants
{
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      '&:hover': {
        bg: 'text',
      }
    },
    secondary: {
      color: 'background',
      bg: 'secondary',
    },
  },
}