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. 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

A custom, styled button that can be used both for internal grid-related action and for user-specific actions. It is stylable via CSS. Some buttons are automatically inserted when a feature that uses it enabled, like pager, while others <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"
  • "copycell"
  • "createrecord"
  • "createrecordend"
  • "createrecordstart"
  • "deselect"
  • "editcell"
  • "editrecord"
  • "editrow"
  • "firstpage"
  • "fixedmenu"
  • "getselection"
  • "insertrecord"
  • "layoutrow"
  • "layoutcard"
  • "lastpage"
  • "menu"
  • "nextpage"
  • "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"
  • "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

All the associated --zg-button CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
  --zg-button-color: red;
}
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.

zg-button {
  background: red;
}