Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/system-ui/theme-ui/llms.txt

Use this file to discover all available pages before exploring further.

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>