Gravity
Search…
Button

Standard Button

1
<Button
2
text='Save'
3
action={ save }
4
params={{ id: 3141 }}
5
/>
Copied!

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.
1
<TextButton
2
color='red',
3
text='Save'
4
action={ save }
5
/>
Copied!

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.
1
<Button
2
loading={ loading }
3
text='Click Me'
4
/>
Copied!

Icon Button

Create a clickable icon button.
1
<IconButton
2
image='save'
3
size={ 20 }
4
action={ save }
5
/>
Copied!

Props

prop
description
value
image
icon image name
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
Last modified 6mo ago