components

Button (code)

Buttons indicate possible actions or choices to a user.

import { Add } from '@mediahuis/chameleon-theme-wl/icons'

import { Button } from '@mediahuis/chameleon-react'

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

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

Props

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

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

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

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.

Appearance

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>

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

Width

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>

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

Size

default: large

Buttons come in different shapes and sizes.

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

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

Loading

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>

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