Button

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

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>

ThemeUIStyleObject

Theme-aware styles to customize the button appearance.

<Button sx={{ fontSize: 3, px: 4, py: 3 }}>
  Large Button
</Button>

boolean

Disable the button.

<Button disabled>Disabled</Button>

'button' | 'submit' | 'reset'

HTML button type attribute.

<Button type="submit">Submit Form</Button>

(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>

Core

Styling

Color Modes

Components

Packages

Import

Usage

Props

Inherited Props

Default Styles

Examples

Basic Button

Button Variants

Custom Styling

Responsive Button

Full Width Button

Icon Button

Loading State

​Import

​Usage

​Props

​Inherited Props

​Default Styles

​Examples

​Basic Button

​Button Variants

​Custom Styling

​Responsive Button

​Full Width Button

​Icon Button

​Loading State

Import

Usage

Props

Inherited Props

Default Styles

Examples

Basic Button

Button Variants

Custom Styling

Responsive Button

Full Width Button

Icon Button

Loading State