Button

Gravity ships with the Swiss Army knife of buttons. The <Button/> component can render a multitude of styles and behaviours, including standard buttons, text buttons and icon buttons.

Preview

Code

<Button
  color='blue'
  text='Save'
  action={ saveFunction }
  params={{ id: 3141 }}
/>

Props

Prop	Description	Required	Value
action	callback function executed on click	required (or use goto)	function
alignLeft	align the icon to the left	optional	boolean
alignRight	align the icon to the right	optional	boolean
big	a big button	optional	boolean
className	custom styles	optional	SCSS or Tailwind style
color	background color	optional	red, blue or green (default: green)
fillIcon	use a solid icon	optional	boolean
fullWidth	extend to the full width of the parent	optional	boolean
goto	URL to go to instead of action	optional	string
icon	icon image	optional	string
iconButton	create an icon button with no text	optional	boolean
iconPack	icon pack to use	optional	fontawesome or feather (default)
iconSize	icon size	optional	integer (default: 18)
loading	toggle loading animation	optional	boolean
lowercase	Uncapitlise the button text	optional	boolean
outline	outline button with no background	optional	boolean
params	object passed to the callback	optional	object
position	CSS position	optional	absolute or relative (default: relative)
rounded	pill button	optional	boolean
small	a small button	optional	boolean
text	button label	required	string
textOnly	text button with no background	optional	boolean
title	title that appears on hover	optional	string