Button

Import

import { Button } from '@windmill/react-ui'

Size

There are four sizes, applied by the prop size: larger, large, regular (default) and small.

<Button size="larger">Larger</Button>
<Button size="large">Large</Button>
<Button>Regular</Button>
<Button size="small">Small</Button>

Layout

There are three styles, applied by the prop layout: primary (default), outline and link.

<Button>Primary</Button>
<Button layout="outline">Outline</Button>
<Button layout="link">Link</Button>

Icon

There are three icon positions: icon applies an icon image centered in a button or, if it has children, has the same behavior as iconLeft. The other two are iconLeft and iconRight, perfect to use with text.

<Button iconRight={HeartIcon}>Icon right</Button>
<Button iconLeft={HeartIcon}>Icon left</Button>
<Button iconLeft={HeartIcon} iconRight={EditIcon}>Two icons</Button>
<Button icon={HeartIcon} aria-label="Like" />
<Button icon={HeartIcon} layout="link" aria-label="Like" />
<Button icon={HeartIcon} layout="outline" aria-label="Like" />

Disabled

The disabled prop applies disabled styles to any button.

<Button disabled>Primary</Button>
<Button disabled layout="outline">Outline</Button>
<Button disabled layout="link">Link</Button>

Block

The block property is a shortcut for className="w-full" and makes the Button span the whole width of its parent.

<Button block>Primary</Button>
<Button block layout="outline">Outline</Button>
<Button block layout="link">Link</Button>

Tag

The tag is responsible for rendering a specific HTML element as a Button, and is mostly used to create anchors styled as buttons. You can also pass another component as a tag, like a Link from react-router, eg: tag={Link}

<Button tag="a" href="#">
  Primary
</Button>

Props overview

Customizing

See Customization to learn how to change defaultTheme styles.