---
title: "Button | Features"
description: "ZingGrid has styleable and flexible interactions within a self contained button system with slotted content in `<zg-button>`."
url: https://www.zinggrid.com/docs/features/button
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/button.md
mode: provenance
representation: markdown
origin_response_id: 60803c98eba53eb29834451798e07b2e
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.674Z
version_nonce: 26f520b9905a22441d312da8ee345882
generated_at_utc: 2026-10-25T22:52:58.375Z
response_nonce: 3da7ed41ce2043368c21be2d965cd66b
```

# Button

The `<zg-button>` element is used both for core, internal buttons as well as offering a styled and flexible component for custom use. Depending on how it is used, ZingGrid interprets how to render the button accordingly.

## Internal Buttons

You can style and modify internal buttons without changing their behavior. Add text labels or change the default icon. Anything you don't change is rendered normally.

### Adding a Text Label

The simplest modification is to add a text label and have the rest of the button render normally. To do this, just add your text label inside the button, like so:

```html
<zg-button action="editrecord">Edit</zg-button>
```

> **Note:** Internal buttons always have an `action` attribute which tells ZingGrid how to interpret its functionality. [See all button actions here](https://www.zinggrid.com/docs/api/tags/zg-button).

### Icons

Here is a list of ZingGrid's internal icons:

[Example code](https://app.zingsoft.com/demos/embed/HJ08BICR)

## Slotted Content

To modify the internal button's **icon** or **checkbox**, you must directly tell the button which piece of it you are replacing. You do this by adding the appropriate `slot` to your replacement.

To replace the default icon, add your replacement `<zg-icon>` inside the button with the correct slot, like so:

```html
<zg-button action="createrecord">
  <zg-icon name="close" slot="icon"></zg-icon>
</zg-button>
```
To replace the default checkbox, add your replacement inside the button with the correct slot, like so:

`<zg-button action="editrecord">`
  `<zg-icon name="checkmark" slot="checkbox">``</zg-icon>`
`</zg-button>`

### Replaced Icon Grid

Here is a complete grid with "close" icons rather than the default "removerecord" icons:

[Example code](https://app.zingsoft.com/demos/embed/6SZVIH1T)

## Custom Content

Use the same `<zg-button>` for your own custom use (see below). Since it doesn't have an `action` attribute, ZingGrid knows it is custom and will render your button "as-is" without the internal icon, checkbox, and label elements.

```html
<zg-button>
  <img src="..." alt="..."/>
  <span>My Button</span>
</zg-button>
```

> **Note:** Custom buttons also come with their own styling which makes them look more like buttons.

### Custom Button Grid
Here is a complete grid with custom buttons:

[Example code](https://app.zingsoft.com/demos/embed/K5VSZSW6)

## Button Placement

Not all buttons can be placed in all places within your grid. The list below shows what button action can be used where.

### Context Menu
The following button actions will only work in the context menu: `copycell`, `editcell`, `editrecord`, `editrow`, `pagecell`, and  `removerecord`.

### Head Cell
The following button action will only work in a zg-head cell: `sortcolumn`.

### Free Placement
The following button actions can be used anywhere in the grid: `cancelrecord`, `checkbox`, `createrecord`, `createrecordstart`, `createrecordend`, `firstpage`, `fixedmenu`, `insertrow`, `lastpage`, `layoutrow`, `layoutcard`, `menu`, `nextpage`, `prevpage`, `reload`, `submitrecord`, and `about`.

  ## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

  * [Button Attributes](https://www.zinggrid.com/docs/api/tags/zg-button)