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 }}
/>
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