Gravity
Search
⌃K

Button

Gravity comes with the Swiss army knife of buttons. The button component can render a multitude of styles and behaviours depending on its props.
<Button
color='blue'
text='Save'
action={ save }
params={{ id: 3141 }}
/>

Props

prop
description
value
text
button label
string
color
background color
red, blue or green (default)
className
custom CSS styles (optional)
CSS object
action
callback function executed on click
function
params
object passed back in the callback (optional)
object
icon
icon image (renders an icon button)
Feather icon image
small
render a small button
true or false
textOnly
render a text button
true or false
outline
render an outline button
true or false
fullWidth
stretch the button to full width
true or false
rounded
set rounded edges on the button
true or false
loading
render a dynamic loading animation
true or false (loading state)
goto
navigates to a relative url within the app
string
alignLeft
align the icon to the left
true or false
alignRight
align the icon to the right
true or false
position
set the CSS position
absolute, relative, fixed
Last modified 1yr ago