Button

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Modal windows
• Forms
• Cards
• Toolbars

Basic button

The Button comes with four global variants: plain, outlined, soft and solid (default).

<Button variant="plain">Plain</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="soft">Soft</Button>
<Button variant="solid">Solid</Button>

Colors

All theme palettes are available via the color prop which can be combined with the variant prop.

Sizes

The Button has three sizes: sm, md (default) and lg.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Icons

Use startIcon and/or endIcon props to control the position of the specified icon.

<Button startIcon={<Add />}>Add to cart</Button>
<Button
  variant="soft"
  color="neutral"
  endIcon={<KeyboardArrowDown fontSize="lg" />}
>
  <ThumbUp />
</Button>
<Button variant="outlined" endIcon={<KeyboardArrowRight />} color="success">
  Checkout
</Button>

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.