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

Variants

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

Default Secondary Success Info Warning Error Transparent Star 
<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>
<zn-button color="star">Star</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 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>
<zn-button outline color="star">Outline</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.0/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.0/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.

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>