Button | Windmill React UI

Import

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

Size

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

live editor

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

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

live editor

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

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

live editor

<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" />

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

live editor

<Button disabled>Primary</Button>
<Button disabled layout="outline">Outline</Button>
<Button disabled layout="link">Link</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.

live editor

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

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

Primary

live editor

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

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

Props overview

Prop	Description	Type	Default
`size`	define the size of component	`larger`, `large`, `regular`, `small`	`regular`
`layout`	define the layout of component	`primary`, `outline`, `link`	`primary`
`icon`	add an icon to the button	`ReactNode`
`iconLeft`	add an icon to the left of the button	`ReactNode`
`iconRight`	add an icon to the right of the button	`ReactNode`
`disabled`	disable state of button	`boolean`	`false`
`block`	expand full width	`boolean`	`false`
`tag`	define the element tag	`string`, `ReactNode`	`button`

Customizing

See Customization to learn how to change defaultTheme styles.