--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-button --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-button.md mode: provenance representation: markdown origin_response_id: a0a7e366b5bd36b53a423492c8a00dc1 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.616Z version_nonce: b1efedf3e01e835d4969e1532081e4c0 generated_at_utc: 2026-11-03T02:20:39.399Z response_nonce: 950991240e3dd7f87317fbf5fa070a9a ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-button--docs) The `` 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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-button-web-component-dom.png "Image of the DOM relationship for the zg-button web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGCaption](https://www.zinggrid.com/docs/api/tags/zg-caption) | Parent | Generated, Manual | n/a | | [ZGCard](https://www.zinggrid.com/docs/api/tags/zg-card) | Parent | Manual | n/a | | [ZGCell](https://www.zinggrid.com/docs/api/tags/zg-cell) | Parent | Generated | [ZGBody](https://www.zinggrid.com/docs/api/tags/zg-body) | | [ZGColumn](https://www.zinggrid.com/docs/api/tags/zg-column) | Parent | Manual | n/a | | [ZGControlBar](https://www.zinggrid.com/docs/api/tags/zg-control-bar) | Parent | Generated | n/a | | [ZGDialog](https://www.zinggrid.com/docs/api/tags/zg-dialog) | Parent | Manual | n/a | | [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Manual | n/a | | [ZGHeadCell](https://www.zinggrid.com/docs/api/tags/zg-head-cell) | Parent | Generated | n/a | | [ZGLayoutControls](https://www.zinggrid.com/docs/api/tags/zg-layout-controls) | Parent | Generated | n/a | | [ZGLoadMask](https://www.zinggrid.com/docs/api/tags/zg-load-mask) | Parent | Manual | n/a | | [ZGMenu](https://www.zinggrid.com/docs/api/tags/zg-menu) | Parent | Generated | n/a | | [ZGMenuItem](https://www.zinggrid.com/docs/api/tags/zg-menu-item) | Parent | Generated | n/a | | [ZGNoData](https://www.zinggrid.com/docs/api/tags/zg-no-data) | Parent | Generated, Manual | n/a | | [ZGPager](https://www.zinggrid.com/docs/api/tags/zg-pager) | Parent | Generated, Manual | n/a | | [ZGSource](https://www.zinggrid.com/docs/api/tags/zg-source) | Parent | Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Generated | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Generated, Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zg-icon/) - [``](https://www.zinggrid.com/docs/api/tags/zg-checkbox/) ## 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 ``s are inserted manually by the user. **Example Usage** ```html ``` ### action Sets the action of the button - Type: String - Default: `""` - Accepted values: "batchedit", "batcheditcancel", "batcheditsave", "cancel", "cancelrecord", "checkbox", "closerowdetails", "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", "openrowdetails", "openrowgroup", "pastecell", "prevpage", "reload", "removerecord", "undoremoverecord", "search", "selectall", "selectcell", "selectrow", "sortcolumn", "submitrecord", "about" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/91NN585A) ### custom-disabled 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 - Type: String - Default: `""` - Accepted values: "customFunction" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/317PZ5AO) ### custom-tooltip Sets the tooltip in the case of custom buttons. Can override the default tooltip on builtin buttons - Type: String - Default: `""` - Accepted values: "Tooltip" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/E4OTTU1J) ### disabled Presence of attribute determines if the button is disabled or not - Type: Boolean - Default: `""` - Accepted values: N/A - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/MIQE2B6K) ### force-border 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"]` - Type: String | Boolean - Default: `""` - Accepted values: "disabled" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/4JRJ599F) ### handler A custom function to call on button click - Type: function - Supported versions: 2.x ### icon Sets the icon for the button - Type: String - Default: `""` - 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" - Supported versions: 1.x, 2.x [Example code](https://app.zingsoft.com/demos/embed/2YF9ASJA) ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-button-background` | Browser's default value | Styles the background of button | [Example code](https://app.zingsoft.com/demos/embed/0NOUHK2G) | | `--zg-button-background_active` | var(--theme-background-color) | Styles of background of button on active state | [Example code](https://app.zingsoft.com/demos/embed/B5GX883S) | | `--zg-button-background_custom` | Browser's default value | Styles the background of custom button | [Example code](https://app.zingsoft.com/demos/embed/ILHRA36E) | | `--zg-button-background_custom_active` | Browser's default value | Styles the background of custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/I7M662SJ) | | `--zg-button-background_custom_focus` | Browser's default value | Styles the background of custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/DNQPAWTN) | | `--zg-button-background_custom_hover` | Browser's default value | Styles the background of custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/3NS677KC) | | `--zg-button-background_focus` | Browser's default value | Styles the background of button on focus | [Example code](https://app.zingsoft.com/demos/embed/KHSJ4IAG) | | `--zg-button-background_hover` | Browser's default value | Styles the background of button on hover | [Example code](https://app.zingsoft.com/demos/embed/F1CZ5AEC) | | `--zg-button-border` | Browser's default value | Styles the border of a button | [Example code](https://app.zingsoft.com/demos/embed/OQ49B7D2) | | `--zg-button-border_active` | Browser's default value | Styles the border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/XPUZZ3LU) | | `--zg-button-border_custom` | Browser's default value | Styles the border of custom button | [Example code](https://app.zingsoft.com/demos/embed/VZ1UMHDW) | | `--zg-button-border_custom_active` | Browser's default value | Styles the border of custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/SBAJGZLD) | | `--zg-button-border_custom_focus` | Browser's default value | Styles the border of custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/6YMT2CI2) | | `--zg-button-border_custom_hover` | Browser's default value | Styles the border of custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/M471ONLC) | | `--zg-button-border_focus` | Browser's default value | Styles the border of a button on focus state | [Example code](https://app.zingsoft.com/demos/embed/6ECRZ83T) | | `--zg-button-border_hover` | Browser's default value | Styles the border of a button on hover state | [Example code](https://app.zingsoft.com/demos/embed/M6VZUWV3) | | `--zg-button-border-bottom` | Browser's default value | Styles the bottom border of a button | [Example code](https://app.zingsoft.com/demos/embed/49VYLDM2) | | `--zg-button-border-bottom_active` | Browser's default value | Styles the bottom border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/NOL6XBMR) | | `--zg-button-border-bottom_focus` | Browser's default value | Styles the bottom border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/TNC5VI4O) | | `--zg-button-border-bottom_hover` | Browser's default value | Styles the bottom border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/N34TY79O) | | `--zg-button-border-left` | Browser's default value | Styles the left border of a button | [Example code](https://app.zingsoft.com/demos/embed/5BOPSVLN) | | `--zg-button-border-left_active` | Browser's default value | Styles the left border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/RG7Z2CMD) | | `--zg-button-border-left_focus` | Browser's default value | Styles the left border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/OTDDVBOS) | | `--zg-button-border-left_hover` | Browser's default value | Styles the left border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/8WXKJKRH) | | `--zg-button-border-right` | Browser's default value | Styles the right border of a button | [Example code](https://app.zingsoft.com/demos/embed/LK4TGZ1R) | | `--zg-button-border-right_active` | Browser's default value | Styles the right border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/TX5552LK) | | `--zg-button-border-right_focus` | Browser's default value | Styles the right border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/MTB5U5AF) | | `--zg-button-border-right_hover` | Browser's default value | Styles the right border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/3F37KXA6) | | `--zg-button-border-top` | Browser's default value | Styles the top border of a button | [Example code](https://app.zingsoft.com/demos/embed/4SWUJJOY) | | `--zg-button-border-top_active` | Browser's default value | Styles the top border of a button on active state | [Example code](https://app.zingsoft.com/demos/embed/X9WBHY4L) | | `--zg-button-border-top_focus` | Browser's default value | Styles the top border of a button on focus | [Example code](https://app.zingsoft.com/demos/embed/LO0MH08V) | | `--zg-button-border-top_hover` | Browser's default value | Styles the top border of a button on hover | [Example code](https://app.zingsoft.com/demos/embed/8YBE3ACC) | | `--zg-button-box-shadow` | Browser's default value | Styles the box-shadow of the button | [Example code](https://app.zingsoft.com/demos/embed/TUG6V5YD) | | `--zg-button-box-shadow_active` | Browser's default value | Styles the box-shadow of the button on activation | [Example code](https://app.zingsoft.com/demos/embed/MX9J71NQ) | | `--zg-button-box-shadow_custom` | Browser's default value | Applies a box shadow behind custom button | [Example code](https://app.zingsoft.com/demos/embed/WV8BPHHG) | | `--zg-button-box-shadow_custom_active` | Browser's default value | Applies a box shadow behind custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/NFET6MLX) | | `--zg-button-box-shadow_custom_focus` | Browser's default value | Applies a box shadow behind custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/ZUYVPA4G) | | `--zg-button-box-shadow_custom_hover` | Browser's default value | Applies a box shadow behing custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/6G5744Z9) | | `--zg-button-box-shadow_focus` | Browser's default value | Styles the box-shadow of the button on focus | [Example code](https://app.zingsoft.com/demos/embed/P92OHBPM) | | `--zg-button-box-shadow_hover` | Browser's default value | Styles the box-shadow of the button on hover | [Example code](https://app.zingsoft.com/demos/embed/RAV3EMI2) | | `--zg-button-color` | Browser's default value | Sets the font color of button | [Example code](https://app.zingsoft.com/demos/embed/RPE1ZPAR) | | `--zg-button-color_active` | Browser's default value | Styles the color of the button on active state | [Example code](https://app.zingsoft.com/demos/embed/RARCAIWD) | | `--zg-button-color_custom_active` | Browser's default value | Sets the font color of custom button on active state | [Example code](https://app.zingsoft.com/demos/embed/L6FV9PN6) | | `--zg-button-color_custom_focus` | Browser's default value | Sets the font color of custom button on focus | [Example code](https://app.zingsoft.com/demos/embed/6SPOXN1V) | | `--zg-button-color_custom_hover` | Browser's default value | Sets the font color of custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/UTHW9VD5) | | `--zg-button-color_focus` | Browser's default value | Styles the color of the button on focus | [Example code](https://app.zingsoft.com/demos/embed/18C3727I) | | `--zg-button-color_hover` | Browser's default value | Styles the color of the button on hover | [Example code](https://app.zingsoft.com/demos/embed/TNO4DYRC) | | `--zg-button-font-family` | inherit | Sets the font family of button | [Example code](https://app.zingsoft.com/demos/embed/7JWFA1UO) | | `--zg-button-font-size` | 90% | Sets the font size of button | [Example code](https://app.zingsoft.com/demos/embed/0B3ZKXEO) | | `--zg-button-font-style` | inherit | Sets the font style of button | [Example code](https://app.zingsoft.com/demos/embed/N5ISV2HS) | | `--zg-button-font-weight` | inherit | Sets the font weight of button | [Example code](https://app.zingsoft.com/demos/embed/USH6VNB2) | | `--zg-button-icon-background_custom_hover` | #fff | Styles the background of icon in custom button on hover | [Example code](https://app.zingsoft.com/demos/embed/KM9ESQ95) | | `--zg-button-icon-background_hover` | #fff | Styles the background of the icon in a button on hover state | [Example code](https://app.zingsoft.com/demos/embed/AKM36W15) | | `--zg-button-line-height` | inherit | Sets the line height of button | [Example code](https://app.zingsoft.com/demos/embed/BC7ELB6L) | | `--zg-button-margin` | 0 | Sets the margin of button | [Example code](https://app.zingsoft.com/demos/embed/M834XVE5) | | `--zg-button-opacity_disabled` | 0.2 | Styles the opacity of disabled button or button on hover | [Example code](https://app.zingsoft.com/demos/embed/L2BLE14D) | | `--zg-button-padding` | 3px | Sets the padding of button | [Example code](https://app.zingsoft.com/demos/embed/SXA4AMPI) | | `--zg-button-transition_speed` | var(--theme-transition_speed) | Sets the transition speed of button | [Example code](https://app.zingsoft.com/demos/embed/W9ECS6H6) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-button { background: red; } ``` ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content Slotted Content ``` Below is a list of all the associated ZGButton slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Button content. | | `icon` | Button icon. Replaces the default slot. | | `label` | Button label. Use to add a label when using the "icon" slot. |