Button

Primitive button component with variants

import { Button } from 'theme-ui'

<Button sx={{ mr: 2 }}>Beep</Button>
<Button variant="secondary">Boop</Button>
<Button sx={{ ml: 2 }} hidden>Hidden</Button>
<Button sx={{ mr: 2 }}>Beep</Button>
<Button variant="secondary">Boop</Button>
<Button sx={{ 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',
    },
  },
}