Button - Web Component ​

...

Browser support ​

Parameters ​

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

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

NameTypeDescription
config
(optional)		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
(optional)		string

The name of the icon that will be shown up inside the button. Check the icon list

content
(optional)		stringThe text that will be shown up inside the button.
icon-right
(optional)		boolean

Defines the position of the icon. The default value is true, being omitted.

disabled
(optional)		booleanBlocks the interaction with the component.
loading
(optional)		booleanShows a loading animation inside the button.
wide
(optional)		booleanExpands the button to the full width of its parent.

The events emitted from the component are:

NamePayloadDescription
onclickMouseEvent

The z-button receives a click event that can be used to trigger some action when the button is clicked.

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

Both, background and foreground color can be customized using the --z-button--bg and --z-button--color

Button
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

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.

Button

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

Button can directly be used as links. Just provide a href attribute.

Button

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/button.js"></script>
Code
html
<!-- For the example it's used the Medium size, make sure you try different sizes. 
  You can change the config attribute using: "primary", "secondary", "negative", "positive", "alert" or "link" types, followed by the desired size-->
<z-button config="primary">Button</z-button>
<z-button config="primary" icon="edit:line" icon-right>Button</z-button>
<z-button config="primary" icon="edit:line">Button</z-button>
<z-button config="primary" loading>Button</z-button>
<z-button config="primary:round" icon="edit:line"></z-button>