Button

There are three button components available: standard, text and icon.

Standard Button

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

Preview

Props

Prop	Description	Required	Value
action	callback function executed on click	optional	function
color	text color	optional	white (default), grey, green, red, orange, purple, blue or hex value
background	background color	optional	green (default), grey, red, orange, purple, blue or hex value
fontSize	text size	optional	integer
icon	icon image	optional	string
iconColor	icon color	optional	string (default: white)
iconSize	icon size	optional	integer (default: 20)
loading	toggle loading spinner	optional	boolean
params	object passed to action callback	optional	object
style	custom class	optional	style object
text	button label	required	string
url	internal url to navigate to instead of action	optional	string

‌Text Button

Plain text button.

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

Props

Prop	Description	Required	Value
action	callback function executed on click	optional	function
color	text color	optional	string (default: Global.color.text)
params	object passed to callback action	optional	object
style	custom style	optional	style object
text	button label	required	string

Loading Button

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

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

Icon Button

An icon button with optional text label.

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

Props

Prop	Description	Required	Value
action	callback function executed on click	required	function
background	background color	optional	string (default: transparent)
color	color of the icon	optional	dark, light or hex value
image	icon image	required	​refer to feather icons​
params	object passed back in the callback	optional	object
size	icon size	optional	integer (default: 20)
style	custom style	optional	style object
text	button label	required	optional
textColor	text color	optional	string (default: Global.color.text)