<zg-status>

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-justify-contentflex-startSets the horizontal alignment 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;
}