Skip to content 
Button Button Button
Button Button
Button
Buttons are clickable elements primarily used to perform an action, as they communicate the call-to-action and their style calls for users' attention. Buttons can also be used to allow navigation in some cases, such as for the “Next” or “Back” buttons that help users navigate through a form.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-button--bg | color | Background color |
--z-button--color | color | Foreground color |
--z-button--radius | distance | Radius of the button |
--z-button--backdrop | color | Popover's backdrop color |
--z-button--popover-radius | distance | Popover's radius |
--z-button--popover-padding | distance | Popover's padding |
Both, background and foreground color can be customized using the --z-button--bg and --z-button--color or the custom attribute. You can use the --z-button--radius token to change the border-radius of the button.
Accessibility
...