Skip to content
Theme UI
GitHub

Button

Create a simple button component with variants.

<button
sx={{
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
fontWeight: 'bold',
m: 0,
px: 3,
py: 2,
border: 0,
borderRadius: 4,
variant: 'buttons.primary',
}}>
Button
</button>
/** @jsxImportSource theme-ui */
const Button = ({ variant = 'primary', ...props }) => (
<button
{...props}
sx={{
appearance: 'none',
display: 'inline-block',
textAlign: 'center',
lineHeight: 'inherit',
textDecoration: 'none',
fontSize: 'inherit',
fontWeight: 'bold',
m: 0,
px: 3,
py: 2,
border: 0,
borderRadius: 4,
// pass variant prop to sx
variant: `buttons.${variant}`,
}}
/>
)
export default Button

With the above component, button variants can be defined in theme.buttons.

// example theme
export default {
colors: {
text: '#000',
background: '#fff',
primary: '#07c',
secondary: '#639',
gray: '#555',
},
buttons: {
primary: {
color: 'background',
bg: 'primary',
},
secondary: {
color: 'background',
bg: 'secondary',
},
gray: {
color: 'background',
bg: 'gray',
},
},
}

See also: Button component

Edit the page on GitHub
Previous:
Flexbox Sidebar
Next:
Header A1