Button
<zn-button> | ZnButton
Buttons represent actions that are available to the user.
<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
<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.
<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>
Outline
Use the outline attribute to set the button’s 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.
<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 add an icon to the button.
<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>
Icon-Only Buttons
Buttons can be used with just an icon and no text by omitting the button label.
<zn-button icon="settings"></zn-button> <zn-button icon="favorite" color="error"></zn-button> <zn-button icon="share" color="success"></zn-button> <zn-button icon="add" color="info"></zn-button>
Icon Buttons
Use icon-button to render a chromed icon button: a 40x36 white button with a border, a 6px
radius, and a centred 20px icon. Pass small for the 36x36 variant or round for a
36x36 circle on the tab tint. The icon button style takes precedence over color variants like
secondary — the color attribute only tints the icon.
<zn-button icon-button icon="inventory_2"></zn-button> <zn-button icon-button="small" icon="inventory_2"></zn-button> <zn-button icon-button="round" icon="search"></zn-button> <zn-button icon-button icon="favorite" color="error"></zn-button> <zn-button icon-button icon="check" color="success"></zn-button>
Plain Icon Buttons
Add plain to remove the white background and border while keeping the button’s size, for quiet
inline actions. Hovering tints the background with the tab colour; add no-hover to suppress
that too, for placements where the tint doesn’t fit (e.g. on an already-tinted surface).
<zn-button icon-button plain icon="settings"></zn-button> <zn-button icon-button="small" plain icon="close" color="error" tooltip="Remove"></zn-button> <zn-button icon-button plain no-hover icon="close" color="error" tooltip="Remove Note"></zn-button>
Icon Library
Use icon-library to load the button’s icon from a different icon library, passed through to the
nested zn-icon.
<zn-button icon-button icon="flag" icon-library="lucide"></zn-button> <zn-button icon="rocket" icon-library="lucide">Launch</zn-button>
Icon Position
Use the icon-position attribute to control whether the icon appears before or after the button
text.
<zn-button icon="arrow_back" icon-position="left">Back</zn-button> <zn-button icon="arrow_forward" icon-position="right">Next</zn-button>
Icon Size and Color
Use icon-size and icon-color attributes to customize the icon appearance.
<zn-button icon="star" icon-size="24" icon-color="warning">Large Star</zn-button> <zn-button icon="favorite" icon-size="20" icon-color="error">Favorite</zn-button> <zn-button icon="info" icon-size="16" icon-color="info">Info</zn-button>
Square Buttons
Use the square attribute to create square-shaped buttons, useful for icon-only buttons.
<zn-button icon="delete" square></zn-button> <zn-button icon="edit" square color="info"></zn-button> <zn-button icon="save" square color="success"></zn-button> <zn-button icon="close" square color="error"></zn-button>
Grow
Use the grow attribute to make the button expand to fill its container width.
<zn-button grow>Full Width Button</zn-button> <zn-button grow color="success">Submit Form</zn-button>
Loading State
Use the loading attribute to show a loading state on the button.
<zn-button loading loading-text="Processing...">Click Me</zn-button> <zn-button loading loading-text="Saving" color="success">Save</zn-button> <zn-button loading loading-text="Loading" color="info">Load Data</zn-button>
Notifications
Use the notification attribute to display a notification badge on the button. Positive numbers
show the count, while negative numbers show a dot indicator.
<zn-button icon="notifications" notification="5">Notifications</zn-button> <zn-button icon="mail" notification="12" color="info">Messages</zn-button> <zn-button icon="chat" notification="-1" color="success">Chat</zn-button> <zn-button icon="notifications" notification="0">No Notifications</zn-button>
Use muted-notifications for a subtle notification style.
<zn-button icon="notifications" notification="3" muted-notifications>Muted</zn-button>
Tooltip
Use the tooltip attribute to add a tooltip to the button.
<zn-button icon="info" tooltip="This button provides additional information"></zn-button> <zn-button icon="help" tooltip="Click for help" color="info">Help</zn-button>
Links
Buttons can work as hyperlinks by using the href attribute.
<zn-button href="https://example.com" target="_blank">External Link</zn-button> <zn-button href="/dashboard" icon="dashboard">Dashboard</zn-button> <zn-button href="/settings" icon="settings" text>Settings</zn-button>
Form Integration
Buttons can be used in forms with various form-related attributes.
<form> <zn-input name="email" type="email" label="Email" value="test@example.com"></zn-input> <br /> <zn-button type="submit" color="success">Submit</zn-button> <zn-button type="reset" color="secondary">Reset</zn-button> </form>
You can also override form attributes using formaction, formmethod,
formenctype, formnovalidate, and formtarget.
<form action="/default" method="post"> <zn-input name="query" label="Search"></zn-input> <br /> <zn-button type="submit">Default Submit</zn-button> <zn-button type="submit" formaction="/search" formmethod="get">Search</zn-button> </form>
Dropdown Closer
Use the dropdown-closer attribute to automatically close parent dropdowns when the button is
clicked.
<zn-dropdown> <zn-button slot="trigger">Menu</zn-button> <zn-menu> <zn-menu-item> <zn-button dropdown-closer text>Close on Click</zn-button> </zn-menu-item> <zn-menu-item> <zn-button text>Stays Open</zn-button> </zn-menu-item> </zn-menu> </zn-dropdown>
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.1.39/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.1.39/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.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
iconButton
icon-button
|
Renders the button as an icon button (40x36). Pass small for the 36x36 variant or
round for a 36x36 circle: icon-button, icon-button="small" or
icon-button="round".
|
boolean | 'small' | 'round'
|
false
|
|
plain
|
With icon-button, removes the white background and border while keeping the button’s
size.
|
boolean
|
false
|
|
noHover
no-hover
|
Disables the hover background, for contexts where the tint doesn’t fit. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
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>