Skip to main content
The Button component is a primitive button element with built-in variant support and theme-aware styling.

Import

import { Button } from 'theme-ui'

Usage

<Button>Click Me</Button>

Props

variant
string
default:"'primary'"
Button variant from theme.buttons. The component uses the primary variant by default.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
sx
ThemeUIStyleObject
Theme-aware styles to customize the button appearance.
<Button sx={{ fontSize: 3, px: 4, py: 3 }}>
  Large Button
</Button>
disabled
boolean
Disable the button.
<Button disabled>Disabled</Button>
type
'button' | 'submit' | 'reset'
HTML button type attribute.
<Button type="submit">Submit Form</Button>
onClick
(event: React.MouseEvent) => void
Click event handler.
<Button onClick={() => console.log('clicked')}>Click</Button>

Inherited Props

Button extends Box and accepts:
  • All standard HTML button attributes
  • Box spacing props (m, p, mx, my, px, py, etc.)
  • Box color props (color, bg, opacity)

Default Styles

The Button component includes these base styles:
{
  appearance: 'none',
  display: 'inline-block',
  textAlign: 'center',
  lineHeight: 'inherit',
  textDecoration: 'none',
  fontSize: 'inherit',
  px: 3,
  py: 2,
  color: 'white',
  bg: 'primary',
  border: 0,
  borderRadius: 4,
}

Examples

Basic Button

<Button>Default Button</Button>

Button Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>

Custom Styling

<Button
  sx={{
    bg: 'secondary',
    color: 'text',
    borderRadius: 8,
    px: 4,
    py: 3,
    fontSize: 2,
  }}
>
  Custom Button
</Button>

Responsive Button

<Button
  sx={{
    fontSize: [1, 2, 3],
    px: [2, 3, 4],
  }}
>
  Responsive
</Button>

Full Width Button

<Button sx={{ width: '100%' }}>
  Full Width
</Button>

Icon Button

<Button sx={{ p: 2 }}>
  <svg width="24" height="24">...</svg>
</Button>

Loading State

<Button disabled sx={{ opacity: 0.6 }}>
  Loading...
</Button>

Build docs developers (and LLMs) love