<zg-status>
Interactive Storybook Playground
The <zg-status> tag is a web component that is used to display messages to the user, such as errors and verifications of CRUD actions. <zg-status> is created dynamically and should not be inserted by the user. You can style the <zg-status> through CSS variables or the zg-status CSS selector.
Related Web Components
Attributes
There are no attributes available for the <zg-status> web component.
CSS Variables
<zg-status> can be styled with CSS variables, like so:
: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 or our Styling Basics guide to learn more about styling the grid.
<zg-status> 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 | CSS Ref |
|---|---|---|---|---|
| --zg-status-align-items | center | Sets the alignment of inner elements of status | ||
| --zg-status-background | #333 | Styles the background of status | ||
| --zg-status-border | 0 | Styles the border of status | ||
| --zg-status-border-bottom | var(--zg-status-border, 0) | Styles the bottom border of status | ||
| --zg-status-border-left | var(--zg-status-border, 0) | Styles the left border of status | ||
| --zg-status-border-right | var(--zg-status-border, 0) | Styles the right border of status | ||
| --zg-status-border-top | var(--zg-status-border, 1px solid var(--theme-border-color)) | Styles the top border of status | ||
| --zg-status-box-shadow | none | Applies a box shadow behind status | ||
| --zg-status-color | #fff | Sets the font color of contents in status | ||
| --zg-status-error-background | red | Styles the background of 'error' status | ||
| --zg-status-error-color | #fff | Sets the font color of contents of 'error' status | ||
| --zg-status-font-family | var(--theme-font-family) | Sets the font family of contents in status | ||
| --zg-status-font-size | inherit | Sets the font size of contents in status | ||
| --zg-status-line-height | 1 | Sets the line height of status | ||
| --zg-status-margin | 0 | Sets the margin of status | ||
| --zg-status-max-width | 300px | Sets the max-width of the status-message area | ||
| --zg-status-min-height | 27px | Sets the min-height of status | ||
| --zg-status-padding | 14px var(--theme-padding_x) | Sets the padding of status | ||
| --zg-status-success-background | green | Styles the background of 'success' status | ||
| --zg-status-success-color | #fff | Sets the font color of contents of 'success' status |
CSS Selector
<zg-status> can be styled by common CSS selectors, like so:
zg-status { font-size: 2rem; }
CSS Shadow Parts
<zg-status> exposed elements within the shadow can be styled by CSS shadow parts, like so:
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 or our Styling Basics guide to learn more about styling the grid.
| Name | Description | Demo |
|---|---|---|
| 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 <zg-status> web component.
[api: <zg-status>]