--- 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-status --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-status.md mode: provenance representation: markdown origin_response_id: 68c4468ed7813c24d2e363f7120394a9 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.653Z version_nonce: 3beab9799eca877cc0f447db8a4df0ab generated_at_utc: 2026-11-01T12:30:48.976Z response_nonce: 19a02eac6779eab9e3eb5e52c1716b33 ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-status--docs) The `` tag is a web component that is used to display messages to the user, such as errors and verifications of CRUD actions. `` is created dynamically and **should not be inserted by the user**. You can style the `` through CSS variables or the `zg-status` CSS selector. ![Image of the DOM relationship for the zg-status web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-status-web-component-dom.png "Image of the DOM relationship for the zg-status web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Generated | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zing-grid/) - [``](https://www.zinggrid.com/docs/api/tags/zg-param/) ## Attributes There are no attributes available for the `` web component. ## CSS Variables `` can be styled with CSS variables, like so: ```css :root { --zg-status-background: red; } ``` Below is a list of all the associated `--zg-status` 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. > **Note:** `` has generic CSS variables that control all use cases, as well as specific overrides for its states (success, error, etc). Generic styles are styled in the form of `'element-property' (--zg-status-background)`, whereas overrides are `'element-state-property' (--zg-status-success-background)`. For example, to update the background color of the built-in 'success' state, you'll need to use the more specific variable, since it is already defined in the default template. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-status-align-items` | center | Sets the alignment of inner elements of status | [Example code](https://app.zingsoft.com/demos/embed/ZRT752NI) | | `--zg-status-background` | #333 | Styles the background of status | [Example code](https://app.zingsoft.com/demos/embed/W5V0YNUC) | | `--zg-status-border` | 0 | Styles the border of status | [Example code](https://app.zingsoft.com/demos/embed/Z8G1Y9J0) | | `--zg-status-border-bottom` | var(--zg-status-border, 0) | Styles the bottom border of status | [Example code](https://app.zingsoft.com/demos/embed/RDBMZRYT) | | `--zg-status-border-left` | var(--zg-status-border, 0) | Styles the left border of status | [Example code](https://app.zingsoft.com/demos/embed/0N6OVVNL) | | `--zg-status-border-right` | var(--zg-status-border, 0) | Styles the right border of status | [Example code](https://app.zingsoft.com/demos/embed/V4FJ8NP0) | | `--zg-status-border-top` | var(--zg-status-border, 1px solid var(--theme-border-color)) | Styles the top border of status | [Example code](https://app.zingsoft.com/demos/embed/JR75IU0Z) | | `--zg-status-box-shadow` | none | Applies a box shadow behind status | [Example code](https://app.zingsoft.com/demos/embed/AFADODNH) | | `--zg-status-color` | #fff | Sets the font color of contents in status | [Example code](https://app.zingsoft.com/demos/embed/4M1VTWI2) | | `--zg-status-error-background` | red | Styles the background of 'error' status | [Example code](https://app.zingsoft.com/demos/embed/6PA9F3ZV) | | `--zg-status-error-color` | #fff | Sets the font color of contents of 'error' status | [Example code](https://app.zingsoft.com/demos/embed/I2PDH9NT) | | `--zg-status-font-family` | var(--theme-font-family) | Sets the font family of contents in status | [Example code](https://app.zingsoft.com/demos/embed/V9XSI899) | | `--zg-status-font-size` | inherit | Sets the font size of contents in status | [Example code](https://app.zingsoft.com/demos/embed/DWUD8JY8) | | `--zg-status-line-height` | 1 | Sets the line height of status | [Example code](https://app.zingsoft.com/demos/embed/NIZJO06Q) | | `--zg-status-margin` | 0 | Sets the margin of status | [Example code](https://app.zingsoft.com/demos/embed/68R9EOE1) | | `--zg-status-max-width` | 300px | Sets the max-width of the status-message area | [Example code](https://app.zingsoft.com/demos/embed/SQY0NAMY) | | `--zg-status-min-height` | 27px | Sets the min-height of status | [Example code](https://app.zingsoft.com/demos/embed/I8H3QJQH) | | `--zg-status-padding` | 14px var(--theme-padding_x) | Sets the padding of status | [Example code](https://app.zingsoft.com/demos/embed/OMHQO954) | | `--zg-status-success-background` | green | Styles the background of 'success' status | [Example code](https://app.zingsoft.com/demos/embed/NBN1ICRW) | | `--zg-status-success-color` | #fff | Sets the font color of contents of 'success' status | [Example code](https://app.zingsoft.com/demos/embed/NOBFYNI2) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-status { font-size: 2rem; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css zg-status::part(status) { background-color: red; } ``` Below is a list of all the associated ZGStatus shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `action` | The container for the status action area | | `close` | The container for the close icon | | `close-icon` | The close icon | | `message` | The container for the status message | | `status` | The container for the status | | `text` | The status text | ## Slots There are no slots available for the `` web component.