Skip to main content

​
Button Styling

We provide plenty of styling options for the buttons.
Style Object
style: {
  "primaryButton_margin": "0px 0px 0px 0px",
  "primaryButton_padding": "1rem",
  "primaryButton_outline": "none",
  "primaryButton_borderWidth": "2px",
  "primaryButton_borderColor": "black",
  "primaryButton_borderStyle": "solid",
  "primaryButton_borderRadius": "20px",
  "primaryButton_width": "100%",
  "primaryButton_height": "3rem",
  "primaryButton_fontFamily": "Arial, sans-serif",
  "primaryButton_fontSize": "14px",
  "primaryButton_fontWeight": "600",
  "primaryButton_color": "white",
  "primaryButton_background": "blue",
  "primaryButton_boxSizing": "border-box"
}
You can also use above styling options for various button states like hover, processing and disabled.
Style Object
style: {
  "primaryButton-hover_background": "lightblue",
  "primaryButton-processing_background": "darkgray",
  "primaryButton-disabled_background": "gray",
}
You can style primary buttons as well as secondary buttons.