Button (code)

<Button onClick={() => alert('hi')} iconLeft={Add}>
  My button
</Button>

Name	Type	Default	Required	Description
appearance	'primary''secondary''plain''outline'	'primary'	-	Controls the button’s background, text, and border color.
as	FunctionNodeObject	'button'	-	Render with a different HTML tag or a different custom component.
children	Node	-	-	Contents displayed within the button.
className	String	-	-	Extend classNames.
disabled	Boolean	-	-	Visually and functionally disables the button.
iconLeft	FunctionStringNodeObject	-	-	The icon on the left (extends Icon), choose one of the icons package.
iconRight	FunctionStringNodeObject	-	-	The icon on the right (extends Icon), choose one of the icons package.
loading	Boolean	-	-	Enable/disable the loading state of the button. (Will also disable the button while loading)
size	'small''large'	'large'	-	Changes the button's `line-height`, `padding`, and `font-size`.
width	'auto''full'	'auto'	-	Controls button width property.

System Props

flexProps

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

marginProps

m, mb, ml, mr, mt, mx, my

floatProps

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

default: primary

To differentiate between levels of emphasis, there are 4 possible appearances a button can have.

<Button appearance="primary">Primary</Button>
<Button appearance="secondary">Secondary</Button>
<Button appearance="plain">Plain</Button>
<Button appearance="outline">Outline</Button>

default: auto

By default, buttons will only take up the space necessary in order to fit its text content and the needed padding. In order for your button to fill the complete surrounding element, you can adjust the width parameter.

<Button width="full">Full width button</Button>

default: large

Buttons come in different shapes and sizes.

<Button size="large">Large button</Button>
<Button size="small">Small button</Button>

default: false

To indicate to a user that something is loading, you can pass in the loading prop.

<Button loading={false}>Default button</Button>
<Button loading={true}>Loading button</Button>