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

Image of the DOM relationship for the zg-status web component tag

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.

ZGStatus CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-status-align-itemscenterSets the alignment of inner elements of status
--zg-status-background#333Styles the background of status
--zg-status-border0Styles the border of status
--zg-status-border-bottomvar(--zg-status-border, 0)Styles the bottom border of status
--zg-status-border-leftvar(--zg-status-border, 0)Styles the left border of status
--zg-status-border-rightvar(--zg-status-border, 0)Styles the right border of status
--zg-status-border-topvar(--zg-status-border, 1px solid var(--theme-border-color))Styles the top border of status
--zg-status-box-shadownoneApplies a box shadow behind status
--zg-status-color#fffSets the font color of contents in status
--zg-status-error-backgroundredStyles the background of 'error' status
--zg-status-error-color#fffSets the font color of contents of 'error' status
--zg-status-font-familyvar(--theme-font-family)Sets the font family of contents in status
--zg-status-font-sizeinheritSets the font size of contents in status
--zg-status-line-height1Sets the line height of status
--zg-status-margin0Sets the margin of status
--zg-status-max-width300pxSets the max-width of the status-message area
--zg-status-min-height27pxSets the min-height of status
--zg-status-padding14px var(--theme-padding_x)Sets the padding of status
--zg-status-success-backgroundgreenStyles the background of 'success' status
--zg-status-success-color#fffSets 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.

ZGStatus CSS Shadow Parts
NameDescriptionDemo
actionThe container for the status action area
closeThe container for the close icon
close-iconThe close icon
messageThe container for the status message
statusThe container for the status
textThe status text

Slots

There are no slots available for the <zg-status> web component.

[api: <zg-status>]