Button

ButtonButtonButton

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.

Implementations

The component Button is available in the following technologies:

CSS Components

Web Components

Parameters

Parameters

Parameters are the attributes that can be used to customize the component when using it in a project. They apply to the WebComponents implementation and wrappers and to the Vue and React CSS implementations. Some parameters names change between the implementations, in order to follow the conventions of each technology and framework.

For example, the param model is named ngModel in Angular, modelValue in Vue, but stays as model in React.

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slottable	Description
config	string		The main parameter has three components following the pattern: <type><?:size><?:round> type: defines the type of button that is going to be shown up. The possible values are: primary, secondary, positive, negative, and link. size: (optional) defines de size of the button. The default value is m, being omitted from the param. The possible values are: xs, s, or l. Check the sizes section. round: (optional) if we define the value round, the button will take a round shape.
icon	string		The name of the icon that will be shown up inside the button. Check the icon list
content	string	✅	The text that will be shown up inside the button.
icon-right	boolean		Defines the position of the icon. The default value is true, being omitted.
disabled	boolean		Blocks the interaction with the component.
loading	boolean		Shows a loading animation inside the button.
wide	boolean  string		Expands the button to the full width of its parent.
href	string		Transform the button into a link.
target	string		The target attribute specifies where to open the linked document.
popover-target	string		Refers to the popover element with the specified id, and toggle between showing and hiding it. Check the official docs
as-submit	boolean		Transform the button into a submit input.
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-button custom='{"fill":"#06e7a3"}' />
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-button custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-button z-theme="dark" />

From Figma to code

You can check the Figma implementation here.

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.

Button Button

Accessibility

...

Related components