Skip to content
Theme UI
GitHub

Button

Primitive button component with variants

import { Button } from '@theme-ui/components'

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',
},
},
}
Edit the page on GitHub
Previous:
Grid
Next:
Text