Button

...

Browser support

...

Parameters

The CSS component uses a <button> tag.

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

Name	Type	Description
z-button	string	The main parameter has two components following the pattern: <type><?:size> type: defines the type of button that is going to be shown up. The possible values are: primary, secondary, positive, negative, alert 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.
icon	string	The name of the icon that will be shown up inside the button. Check the icon list
icon-left	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.
text	string?	The text that will be shown up inside the button.

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

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Button.css" />

Code

<!-- For the example it's used the Medium size, make sure you try different sizes. 
  You can change z-button attribute using: "primary", "secondary", "negative", "positive", "alert" or "link" types, followed by the desired size-->
<button z-button="primary">Button</button>
<button z-button="primary" icon="edit:outline" icon-left>Button</button>
<button z-button="primary" icon="edit:outline">Button</button>
<button z-button="primary" loading>Button</button>
<button z-button="primary:round" icon="edit:outline"></button>