Button - Web Component

The Button component can be used imported from:

Playground

Parameters

The Web component uses the <z-button> tag:

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 HTML params:

Name	Type	Description	Slot	A11y
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.	default
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.

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
click	MouseEvent	...

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
default	span	Content of the button.
popover	span	Used for popover content

Parameters use

Check the documentation about how to use the parameters.

content

The text or content inside the button. It uses the default slot too.

Button

Attention!

Make sure the content is available when the WebComponent is being rendered if you use the slotted content, otherwise it can cause that the button looks round. To avoid this, use the property content instead.

config

type

The z-button component will use the primary type as default, matching the primary type of the specifications.

Button

There are four more types of buttons, secondary, negative, positive, and link

ButtonButtonButtonButton

size

The first modifier is size defines the size of the button. The value is m, being omitted from the parameter. The possible values for size are: xs, s or l. Check the size section.

ButtonButtonButtonButton

round

The second modifier is round, that can receive the value round to implement a round styling to the button.

BTN

This configuration is also applied by default if the button doesn't have text. For example, only having an icon:

TIP

Make sure the content of the round button it's short and concise. Best approach would be to use a simple call to action icon

icon

The attribute icon it's useful to insert a specific CTA icon. Check the icon list here. This attribute will receive the name of the icon to be show. You can use both solid or line (outlined) version.

Button

Only icon

If we use only the icon, the config can still be set:

Flags

icon-right

This attribute will display the icon on the right side of the text.

Button

disabled

The attribute disabled will block the interaction with the component.

ButtonButton

loading

A loading indicator can be added to a button by setting the loading attribute.

Button

wide

The wide attribute will make the button take the full width of the parent container.

Button

There's an option of using spread value to distribute the items with the elements apart:

ButtonButtonButton

Button as link

Button can directly be used as links. Just provide a href attribute. The target attribute will be also available.

Button

Special uses

Back to top

For a smooth behavior in the navigation, use this CSS code:

Smooth off

html {
  scroll-behavior: smooth;
}

Popover

Using the Popover API and the popover-target attribute, we can achieve an easy popover behavior:

Toggle the popover

Popover content

We can also directly use the popoverslot. In this case, the popover is pre-styled:

Toggle the popover

Slotted Popover

The popover element can be customized in this case using the CSS selector z-button::part(popover). The exposed tokens for the customization are:

• --z-button--backdrop
• --z-button--popover-padding
• --z-button--popover-radius

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example