Clicable component


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


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

live editor


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

live editor


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


The disabled prop applies disabled styles to any button.

live editor


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

live editor


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}

live editor

Props overview

sizedefine the size of componentlarger, large, regular, smallregular
layoutdefine the layout of componentprimary, outline, linkprimary
iconadd an icon to the buttonReactNode
iconLeftadd an icon to the left of the buttonReactNode
iconRightadd an icon to the right of the buttonReactNode
disableddisable state of buttonbooleanfalse
blockexpand full widthbooleanfalse
tagdefine the element tagstring, ReactNodebutton


See Customization to learn how to change defaultTheme styles.