Button - Web Component

...

Browser support

Parameters

The Web component uses a <z-button> tag.

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

Name	Type	Description
`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
`icon-right` (optional)	`boolean`	Defines the position of the icon. The default value is `true`, being omitted.
`disabled` (optional)	`boolean`	Blocks the interaction with the component.
`loading` (optional)	`boolean`	Shows a loading animation inside the button.
`content` (optional)	`string`	The text that will be shown up inside the button.
`wide` (optional)	`boolean`	Expands the button to the full width of its parent.

The events emitted from the component are:

Name	Payload	Description
`onclick`	`MouseEvent`	...

TIP

Check a nice example of the component in vanilla HTML. Open the inspector or visualize the source code to fully understand how to use the component and/or play with it.

Playground

Customization

HTML Examples

Imports

html

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@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:outline" icon-right>Button</z-button>
<z-button config="primary" icon="edit:outline">Button</z-button>
<z-button config="primary" loading>Button</z-button>
<z-button config="primary:round" icon="edit:outline"></z-button>

Button - Web Component ​

Browser support ​

Parameters ​

Playground ​

Customization ​