Button

Easily create nice looking buttons, which come in different styles.

Table of contents

• Usage
• Style modifiers
• Customization
• Size modifiers
• Width modifiers
• Icon
• Group
• Button with dropdowns
• Loading

Usage

To apply this component, add the .z-button class and a modifier such as .z-button-default to an <a> or <button> element. Add the disabled attribute to a <button> element to disable the button.

<a class="z-button z-button-default" href=""></a>

<button class="z-button z-button-default"></button>

<button class="z-button z-button-default" disabled></button>

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

• .z-button-default
• .z-button-ghost
• .z-button-primary
• .z-button-secondary
• .z-button-success
• .z-button-warning
• .z-button-info
• .z-button-danger
• .z-button-text

<button class="z-button z-button-primary"></button>

Customization

You can use CSS variables to customize this component in any way you prefer.

Size modifiers

There are several size modifiers available. Just add one of the following classes to make the button smaller or larger.

Width modifiers

You can use utility classes alongside button classes and the it will follow its width.

Icon

Use .z-button-icon class to create an icon button, which can be used for social icons or toolbars.

Group

To create a button group, add the .z-button-group class to a <div> element around the buttons. That’s it! No further markup is needed.

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component.

<!-- A button toggling a dropdown -->
<button class="z-button z-button-default" type="button"></button>
<div data-z-dropdown></div>

Loading

You can use utilities or the Spinner component to add a loading state.