Site status
Importing
Add rh-site-status to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-site-status/rh-site-status.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-site-status></rh-site-status>
<script type="module">
import '@rhds/elements/rh-site-status/rh-site-status.js';
</script>rh-site-status
Provides live operational status for a website or domain using a status
icon and link. Authors SHOULD place this element in the footer. Screen
reader users receive updates via aria-live="polite". Users MAY
activate the link with Enter or Tab to focus it.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
Slots
| Slot Name | Summary | Description |
|---|---|---|
loading-text
|
Localized loading text for screen reader announcement via aria-live polite region |
Attributes
None
Methods
None
Events
None
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-lg
|
Spacing container padding 16px spacer |
|
--rh-color-surface-status-success
|
Operational state background color on light scheme |
|
--rh-color-surface-status-warning
|
Degraded state background color on light scheme |
|
--rh-color-surface-status-danger
|
Critical state background color on light scheme |
|
--rh-color-surface-light
|
Loading background color on light scheme Secondary surface (light theme) |
|
--rh-color-surface-dark
|
Operational state background color on dark scheme Degraded state background color on dark scheme Critical state background color on dark scheme Loading background color on dark scheme Tertiary surface (dark theme) |
|
--rh-font-size-body-text-sm
|
Link font size 14px font size |
|
--rh-space-md
|
Link gap between text and icon 8px spacer |
|
--rh-color-text-primary
|
Link font color |
|
--rh-border-width-md
|
Link focus outline Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional. |
|
--rh-color-border-interactive
|
Link focus outline color |
|
--rh-border-radius-default
|
Border radius container Link focus border radius Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. |
|
--rh-size-icon-01
|
Status Icon width Status Icon height 16px icon box |
|
--rh-color-white
|
Status Icon color Lightest surface (light scheme) or primary text (dark scheme) |
|
--rh-color-status-success
|
Operational state icon status color |
|
--rh-color-status-warning
|
Degraded state icon status color |
|
--rh-color-status-danger
|
Critical state icon status color |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
