Filled
Outlined
Circular
3D
Shadow
Notes
Button blocks are simply styled links, rather than form controls. All variations respect the following CSS custom properties:
- --go-button--font-family
- --go-button--font-weight
- --go-button--font-size
- --go-button--letter-spacing
- --go-button--text-transform
- --go-button--padding–x
- --go-button--padding–y
The colors for all buttons except for the outline variant can be controlled with these properties:
- --go-button--color--background
- --go-button-interactive--color--background
- --go-button--color--text
All variants except for circular also take a --go-button--border-radius property:
Finally, outline buttons take a --go-button--border-width property: