Your site's buttons are often an important part of your brand. Because of this, we offer a lot of control over the look of your buttons.
Types Of Buttons
There are two types of buttons you'll normally theme: primary and standard.
Primary buttons are used as the primary action on most forms. Usually they use your brand color, but can also be styled to just stand out in general. Primary buttons are styled with variables starting with buttonClasses.primary.
Standard buttons are for all other form buttons. They should just appear normal, but still look like buttons. Standard buttons are styled with variables starting with buttonClasses.standard.
Button Style Presets
There are lots of variables that you can use to style buttons. In fact, setting all of the variables can become more complex than is necessary for most themes. That's where presets come in.
When theming your buttons you want to choose a style preset first, and then you choose options for that preset. Consider a preset a quick way to choose the overall look of a button.
There are three button presets: solid, outline, and advanced.
Solid Buttons
Solid buttons have a solid background color and text color.
preset = "solid". Set preset to solid for the button.colors.bg. The background color of the button.colors.fg. The foreground (text) color of the button.
Outline Buttons
Outline buttons have a 1px border and text, but no background.
preset = "outline". Set preset to outline for the button.colors.bg. The border color of the button.colors.fg. The text color of the button.
Advanced Buttons
When you want more control over the appearance of your buttons you use the advanced preset. This has many more variables.
preset = "advanced". Set the preset to advanced for the button.colors.bg. The background color of the button.colors.fg. The foreground color of the button.borders.color. The button's border color.state. You control the hover, active, and other states of the button with this variable. It supports state.colors.bg, state.colors.fg, and state.borders.color.
Putting It All Together
Here is an example of a solid blue primary button and a grey outline standard button. This is expressed as JSON and would be suitable as an API call.
{
"buttonClasses": {
"primary": {
"preset": "solid",
"colors": {
"bg": "#2979ff",
"fg": "#ffffff"
}
},
"standard": {
"preset": "outline",
"colors": {
"bg": "#777777",
"fg": "#555555"
}
}
}
}