Button - Web Component ​

The Button component can be used imported from:

Playground ​

Parameters ​

...

Events ​

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

NamePayloadDescription
clickMouseEvent...

Slots ​

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

NameTagsDescription
defaultspanContent of the button.
popoverspanUsed 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 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
css
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 ​