<zg-button>

Interactive Storybook Playground

The <zg-button> tag is a web component that encapsulates grid actions within a single component. The benefit to this is you can place the component anywhere in the markup and it will just work. For example, you do not have to add event listers for a reload button; you just add the button.

Image of the DOM relationship for the zg-button web component tag

Related Web Components

Attributes

You can add a custom, styled button that can be used both for internal grid-related action and for user-specific actions. Some buttons are automatically inserted when a feature that uses it is enabled, like pager. Other <zg-button>s are inserted manually by the user.

Example Usage

<zing-grid>
  <zg-button disabled action="reload"></zg-button>
</zing-grid>

action

String

Description

Sets the action of the button

Default Value

""

Accepted Values

  • "batchedit"
  • "batcheditcancel"
  • "batcheditsave"
  • "cancel"
  • "cancelrecord"
  • "checkbox"
  • "closerowgroup"
  • "copycell"
  • "createrecord"
  • "createrecordend"
  • "createrecordstart"
  • "deselect"
  • "duplicaterecord"
  • "editcell"
  • "editrecord"
  • "editrow"
  • "firstpage"
  • "fixedmenu"
  • "freezecolumnleft"
  • "freezecolumnright"
  • "unfreezecolumn"
  • "hidecolumn"
  • "freezerowtop"
  • "freezerowbottom"
  • "unfreezerow"
  • "getselection"
  • "insertrecord"
  • "layoutrow"
  • "layoutcard"
  • "resetstate"
  • "lastpage"
  • "menu"
  • "nextpage"
  • "openrowgroup"
  • "pastecell"
  • "prevpage"
  • "reload"
  • "removerecord"
  • "undoremoverecord"
  • "search"
  • "selectall"
  • "selectcell"
  • "selectrow"
  • "sortcolumn"
  • "submitrecord"
  • "about"
Demo

Description

Set to a template or a function to return true or false to set the disabled state The function's callback receives rowData and zg-cell object if in a cell

Default Value

""

Accepted Values

  • "customFunction"
Demo

Description

Sets the tooltip in the case of custom buttons. Can override the default tooltip on builtin buttons

Default Value

""

Accepted Values

  • "Tooltip"
Demo

disabled

Boolean

Description

Presence of attribute determines if the button is disabled or not

Default Value

""

Accepted Values

  • N/A
Demo

force-border

String | Boolean

Description

By default, action buttons have no border and custom buttons do. You can force a border by setting the [force-border] attribute and you can force no border by setting [force-border="disabled"]

Default Value

""

Accepted Values

  • "disabled"
Demo

handler

function

Description

A custom function to call on button click

Default Value

No Default Value

Accepted Values

No Example Values Demo

icon

String

Description

Sets the icon for the button

Default Value

""

Accepted Values

  • "batchedit"
  • "batcheditcancel"
  • "batcheditsave"
  • "cancel"
  • "cancelrecord"
  • "checked"
  • "checkmark"
  • "close"
  • "createrecord"
  • "down"
  • "duplicaterecord"
  • "edit"
  • "editrecord"
  • "error"
  • "error-tmp"
  • "firstpage"
  • "fixedmenu"
  • "info"
  • "lastpage"
  • "layoutcard"
  • "layoutrow"
  • "link"
  • "menu"
  • "nextpage"
  • "outsidearrow"
  • "prevpage"
  • "reload"
  • "remove"
  • "removerecord"
  • "search"
  • "sort"
  • "submitrecord"
  • "success"
  • "unchecked"
  • "undoremoverecord"
  • "up"
  • "warning"
Demo
Top

CSS Variables

<zg-button> can be styled with CSS variables, like so:

:root {
  --zg-button-color: red;
}

Below is a list of all the associated --zg-button CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

ZGButton CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-button-background Browser's default value Styles the background of button
--zg-button-background_active var(--theme-background-color) Styles of background of button on active state
--zg-button-background_custom Browser's default value Styles the background of custom button
--zg-button-background_custom_active Browser's default value Styles the background of custom button on active state
--zg-button-background_custom_focus Browser's default value Styles the background of custom button on focus
--zg-button-background_custom_hover Browser's default value Styles the background of custom button on hover
--zg-button-background_focus Browser's default value Styles the background of button on focus
--zg-button-background_hover Browser's default value Styles the background of button on hover
--zg-button-border Browser's default value Styles the border of a button
--zg-button-border-bottom Browser's default value Styles the bottom border of a button
--zg-button-border-bottom_active Browser's default value Styles the bottom border of a button on active state
--zg-button-border-bottom_focus Browser's default value Styles the bottom border of a button on focus
--zg-button-border-bottom_hover Browser's default value Styles the bottom border of a button on hover
--zg-button-border-left Browser's default value Styles the left border of a button
--zg-button-border-left_active Browser's default value Styles the left border of a button on active state
--zg-button-border-left_focus Browser's default value Styles the left border of a button on focus
--zg-button-border-left_hover Browser's default value Styles the left border of a button on hover
--zg-button-border-right Browser's default value Styles the right border of a button
--zg-button-border-right_active Browser's default value Styles the right border of a button on active state
--zg-button-border-right_focus Browser's default value Styles the right border of a button on focus
--zg-button-border-right_hover Browser's default value Styles the right border of a button on hover
--zg-button-border-top Browser's default value Styles the top border of a button
--zg-button-border-top_active Browser's default value Styles the top border of a button on active state
--zg-button-border-top_focus Browser's default value Styles the top border of a button on focus
--zg-button-border-top_hover Browser's default value Styles the top border of a button on hover
--zg-button-border_active Browser's default value Styles the border of a button on active state
--zg-button-border_custom Browser's default value Styles the border of custom button
--zg-button-border_custom_active Browser's default value Styles the border of custom button on active state
--zg-button-border_custom_focus Browser's default value Styles the border of custom button on focus
--zg-button-border_custom_hover Browser's default value Styles the border of custom button on hover
--zg-button-border_focus Browser's default value Styles the border of a button on focus state
--zg-button-border_hover Browser's default value Styles the border of a button on hover state
--zg-button-box-shadow Browser's default value Styles the box-shadow of the button
--zg-button-box-shadow_active Browser's default value Styles the box-shadow of the button on activation
--zg-button-box-shadow_custom Browser's default value Applies a box shadow behind custom button
--zg-button-box-shadow_custom_active Browser's default value Applies a box shadow behind custom button on active state
--zg-button-box-shadow_custom_focus Browser's default value Applies a box shadow behind custom button on focus
--zg-button-box-shadow_custom_hover Browser's default value Applies a box shadow behing custom button on hover
--zg-button-box-shadow_focus Browser's default value Styles the box-shadow of the button on focus
--zg-button-box-shadow_hover Browser's default value Styles the box-shadow of the button on hover
--zg-button-color Browser's default value Sets the font color of button
--zg-button-color_active Browser's default value Styles the color of the button on active state
--zg-button-color_custom_active Browser's default value Sets the font color of custom button on active state
--zg-button-color_custom_focus Browser's default value Sets the font color of custom button on focus
--zg-button-color_custom_hover Browser's default value Sets the font color of custom button on hover
--zg-button-color_focus Browser's default value Styles the color of the button on focus
--zg-button-color_hover Browser's default value Styles the color of the button on hover
--zg-button-font-family inherit Sets the font family of button
--zg-button-font-size 90% Sets the font size of button
--zg-button-font-style inherit Sets the font style of button
--zg-button-font-weight inherit Sets the font weight of button
--zg-button-icon-background_custom_hover #fff Styles the background of icon in custom button on hover
--zg-button-icon-background_hover #fff Styles the background of the icon in a button on hover state
--zg-button-line-height inherit Sets the line height of button
--zg-button-margin 0 Sets the margin of button
--zg-button-opacity_disabled 0.2 Styles the opacity of disabled button or button on hover
--zg-button-padding 3px Sets the padding of button
--zg-button-transition_speed var(--theme-transition_speed) Sets the transition speed of button
Top

CSS Selector

<zg-button> can be styled by common CSS selectors, like so:

zg-button {
  background: red;
}
Top

Slots

<zg-button> contains placeholders to allow adding markup inside the component.

<!-- Default slot -->
<zg-button>Slotted Content</zg-button>

<!-- Named slot -->
<zg-button><span slot="label">Slotted Content</span></zg-button>

Below is a list of all the associated ZGButton slots. Check out the full list of slots.

ZGButton Slots
Name Description Demo
Button content.
icon Button icon. Replaces the default slot.
label Button label. Use to add a label when using the "icon" slot.
Top

[api: <zg-button>]