Button

Standard Button

<Button
text='Save'
action={ save }
params={{ id: 3141 }}
/>

Props

prop

description

value

text

button label

string

background

the background color (optional)

green, grey, red, orange, purple, blue or hex value

color

color of the text (optional)

white, grey, green, red, orange, purple, blue or hex value

action

callback function executed on click

function

params

object passed back in the callback (optional)

object

url

internal url to navigate to

string

‌Text Button

Create a clickable plain text button.

<TextButton
color='red',
text='Save'
action={ save }
/>

Props

prop

description

value

text

button label

string

color

text color

white, grey, green, red, orange, purple, blue or hex value

action

callback function executed on click

function

params

object passed back in the callback (optional)

object

Loading Button

If an action is going to take some time to process, you can pass a loading prop to a <Button> to provide visual feedback to the user.

<Button
loading={ loading }
text='Click Me'
/>

Icon Button

Create a clickable icon button.

<IconButton
image='save'
size={ 20 }
action={ save }
/>

Props

prop

description

value

image

icon image name

refer to feather icons

color

color of the icon

dark, light or hex value

background

background color

white, grey, green, red, orange, purple, blue or hex value

text

text label (optional)

string

size

size of the icon (optional)

integer (default is 20)

textColor

color of the text

white, grey, green, red, orange, purple, blue or hex value

style

custom styles object

object

action

callback function executed on click

function

params

object passed back in the callback (optional)

object