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

ZGButton Relationships
Component	Relationship	Type	Ancestor
ZGCaption	Parent	Generated, Manual	n/a
ZGCard	Parent	Manual	n/a
ZGCell	Parent	Generated	ZGBody
ZGColumn	Parent	Manual	n/a
ZGControlBar	Parent	Generated	n/a
ZGDialog	Parent	Manual	n/a
ZGFooter	Parent	Manual	n/a
ZGHeadCell	Parent	Generated	n/a
ZGLayoutControls	Parent	Generated	n/a
ZGLoadMask	Parent	Manual	n/a
ZGMenu	Parent	Generated	n/a
ZGMenuItem	Parent	Generated	n/a
ZGNoData	Parent	Generated, Manual	n/a
ZGPager	Parent	Generated, Manual	n/a
ZGSource	Parent	Manual	n/a
ZGCheckbox	Child	Generated	n/a
ZGIcon	Child	Generated, Manual	n/a

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"
"filter"
"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

custom-disabled

String

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

custom-tooltip

String

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"
"filter"
"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
--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-body>

[api: <zg-button>]

api: <zg-caption> >