<zg-button>

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

  • "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"
  • "search"
  • "selectcell"
  • "selectrow"
  • "sortcolumn"
  • "submitrecord"
  • "about"
Demo

disabled

Boolean

Description

Presence of attribute determines if the button is disabled or not

Default Value

""

Accepted Values

  • N/A
Demo

icon

String

Description

Sets the icon for the button

Default Value

""

Accepted Values

  • "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"
  • "submitrecord"
  • "success"
  • "unchecked"
  • "up"
  • "warning"
Demo

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
NameDefaultDescriptionDemoCSS Ref
--zg-button-backgroundBrowser's default valueStyles the background of button
--zg-button-background_activevar(--theme-background-color)Styles of background of button on active state
--zg-button-background_customBrowser's default valueStyles the background of custom button
--zg-button-background_custom_activeBrowser's default valueStyles the background of custom button on active state
--zg-button-background_custom_focusBrowser's default valueStyles the background of custom button on focus
--zg-button-background_custom_hoverBrowser's default valueStyles the background of custom button on hover
--zg-button-background_focusBrowser's default valueStyles the background of button on focus
--zg-button-background_hoverBrowser's default valueStyles the background of button on hover
--zg-button-borderBrowser's default valueStyles the border of a button
--zg-button-border-bottomBrowser's default valueStyles the bottom border of a button
--zg-button-border-bottom_activeBrowser's default valueStyles the bottom border of a button on active state
--zg-button-border-bottom_focusBrowser's default valueStyles the bottom border of a button on focus
--zg-button-border-bottom_hoverBrowser's default valueStyles the bottom border of a button on hover
--zg-button-border-leftBrowser's default valueStyles the left border of a button
--zg-button-border-left_activeBrowser's default valueStyles the left border of a button on active state
--zg-button-border-left_focusBrowser's default valueStyles the left border of a button on focus
--zg-button-border-left_hoverBrowser's default valueStyles the left border of a button on hover
--zg-button-border-rightBrowser's default valueStyles the right border of a button
--zg-button-border-right_activeBrowser's default valueStyles the right border of a button on active state
--zg-button-border-right_focusBrowser's default valueStyles the right border of a button on focus
--zg-button-border-right_hoverBrowser's default valueStyles the right border of a button on hover
--zg-button-border-topBrowser's default valueStyles the top border of a button
--zg-button-border-top_activeBrowser's default valueStyles the top border of a button on active state
--zg-button-border-top_focusBrowser's default valueStyles the top border of a button on focus
--zg-button-border-top_hoverBrowser's default valueStyles the top border of a button on hover
--zg-button-border_activeBrowser's default valueStyles the border of a button on active state
--zg-button-border_customBrowser's default valueStyles the border of custom button
--zg-button-border_custom_activeBrowser's default valueStyles the border of custom button on active state
--zg-button-border_custom_focusBrowser's default valueStyles the border of custom button on focus
--zg-button-border_custom_hoverBrowser's default valueStyles the border of custom button on hover
--zg-button-border_focusBrowser's default valueStyles the border of a button on focus state
--zg-button-border_hoverBrowser's default valueStyles the border of a button on hover state
--zg-button-box-shadowBrowser's default valueStyles the box-shadow of the button
--zg-button-box-shadow_activeBrowser's default valueStyles the box-shadow of the button on activation
--zg-button-box-shadow_customBrowser's default valueApplies a box shadow behind custom button
--zg-button-box-shadow_custom_activeBrowser's default valueApplies a box shadow behind custom button on active state
--zg-button-box-shadow_custom_focusBrowser's default valueApplies a box shadow behind custom button on focus
--zg-button-box-shadow_custom_hoverBrowser's default valueApplies a box shadow behing custom button on hover
--zg-button-box-shadow_hoverBrowser's default valueStyles the box-shadow of the button on hover
--zg-button-box-shadow_hoverBrowser's default valueStyles the box-shadow of the button on hover
--zg-button-colorBrowser's default valueSets the font color of button
--zg-button-color_activeBrowser's default valueStyles the color of the button on active state
--zg-button-color_custom_activeBrowser's default valueSets the font color of custom button on active state
--zg-button-color_custom_focusBrowser's default valueSets the font color of custom button on focus
--zg-button-color_custom_hoverBrowser's default valueSets the font color of custom button on hover
--zg-button-color_focusBrowser's default valueStyles the color of the button on focus
--zg-button-color_hoverBrowser's default valueStyles the color of the button on hover
--zg-button-font-familyinheritSets the font family of button
--zg-button-font-size90%Sets the font size of button
--zg-button-font-styleinheritSets the font style of button
--zg-button-font-weightinheritSets the font weight of button
--zg-button-icon-background_custom_hover#fffStyles the background of icon in custom button on hover
--zg-button-icon-background_hover#fffStyles the background of the icon in a button on hover state
--zg-button-line-heightinheritSets the line height of button
--zg-button-margin0Sets the margin of button
--zg-button-opacity_disabled0.2Styles the opacity of disabled button or button on hover
--zg-button-padding3pxSets the padding of button
--zg-button-transition_speedvar(--theme-transition_speed)Sets the transition speed of button
--zg-button-transition_speedvar(--theme-transition_speed)Sets the transition speed of button

CSS Selector

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

zg-button {
  background: red;
}

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
NameDescriptionDemo
Button content.
iconButton icon. Replaces the default slot.
labelButton label. Use to add a label when using the "icon" slot.

[api: <zg-button>]