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

Top

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

CSS Selector

<zg-status> can be styled by common CSS selectors, like so:

zg-status {
  font-size: 2rem;
}
Top

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

Slots

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

Top

[api: <zg-status>]