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