Light Dark System

Button

<zn-button> | ZnButton
Since 2.0 stable

Buttons represent actions that are available to the user.

Button 
<zn-button>Button</zn-button>

Examples

Auto Click

The auto-click attribute can be added to a button to make it automatically click after a given time

Test Auto Button

Test Auto Button

Test Auto Button 
<zn-button auto-click>
  Test Auto Button
</zn-button auto-click>

<br>
<br>

<zn-button color="transparent" auto-click auto-click-delay="5000">
  Test Auto Button

  <zn-button
    slot="cancel"
    icon="close"
    icon-size="18"
    type="button"
    color="transparent"
  ></zn-button>
</zn-button auto-click>

<br>
<br>

<zn-button color="success" auto-click auto-click-delay="10000" loading-text="Accepting">
  Test Auto Button
  <zn-style slot="cancel" margin="l">
    <zn-button
      icon="call_end"
      icon-size="18"
      type="button"
      color="error"
    ></zn-button></zn-style>
</zn-button>

Variants

Use the color attribute to set the button’s color.

Default Secondary Success Info Warning Error Transparent 
<zn-button color="default">Default</zn-button>
<zn-button color="secondary">Secondary</zn-button>
<zn-button color="success">Success</zn-button>
<zn-button color="info">Info</zn-button>
<zn-button color="warning">Warning</zn-button>
<zn-button color="error">Error</zn-button>
<zn-button color="transparent">Transparent</zn-button>

Sizes

Use the size attribute to set the button’s size.

Content X Small Small Medium Large 
<zn-button size="content">Content</zn-button>
<zn-button size="x-small">X Small</zn-button>
<zn-button size="small">Small</zn-button>
<zn-button size="medium">Medium</zn-button>
<zn-button size="large">Large</zn-button>

Outline

Use the outline attribute to set the button’s outline.

Outline Outline Outline Outline Outline Outline Outline 
<zn-button outline>Outline</zn-button>
<zn-button outline color="secondary">Outline</zn-button>
<zn-button outline color="success">Outline</zn-button>
<zn-button outline color="info">Outline</zn-button>
<zn-button outline color="warning">Outline</zn-button>
<zn-button outline color="error">Outline</zn-button>
<zn-button outline color="transparent">Outline</zn-button>

Text

Use the text attribute to set the button’s style to text.

Outline Text Text Text Text Text Text 
<zn-button text>Outline</zn-button>
<zn-button text color="secondary">Text</zn-button>
<zn-button text color="success">Text</zn-button>
<zn-button text color="info">Text</zn-button>
<zn-button text color="warning">Text</zn-button>
<zn-button text color="error">Text</zn-button>
<zn-button text color="transparent">Text</zn-button>

Icon

Use the icon attribute to set the button’s icon.

Icon Icon Icon Icon Icon Icon Icon 
<zn-button icon="add_circle">Icon</zn-button>
<zn-button icon="file_download" color="secondary">Icon</zn-button>
<zn-button icon="check" color="success">Icon</zn-button>
<zn-button icon="help" color="info">Icon</zn-button>
<zn-button icon="report_problem" color="warning">Icon</zn-button>
<zn-button icon="cancel" color="error">Icon</zn-button>
<zn-button icon="pending" color="transparent">Icon</zn-button>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.14/dist/components/button/button.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.14/dist/components/button/button.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/button/button.js';

Slots

Name Description
(default) The button’s label.
prefix A presentational prefix icon or similar element.
suffix A presentational suffix icon or similar element.
cancel Slot for custom cancel button/content when autoClick is active.

Learn more about using slots.

Events

Name React Event Description Event Detail
zn-blur Emitted when the button loses focus. -
zn-focus Emitted when the button gains focus. -
zn-invalid Emitted when the form control has been checked for validity and its constraints aren’t satisfied. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.
prefix The container that wraps the prefix.
label The button’s label.
suffix The container that wraps the suffix.
caret The button’s caret icon, an <zn-icon> element.
spinner The spinner that shows when the button is in the loading state.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>
  • <zn-icon>
  • <zn-tooltip>