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-lighter
|
Container background color on light color scheme Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Container background color on dark color scheme Secondary surface (dark theme) |
|
--rh-border-width-sm
|
Container border size Applies a 1px border width to at least 1 side of a container. This shall be the default width for all borders and lines. It should be used to establish baseline thickness or visual separation with a container or thin line. It must not be used for strong directional emphasis like indicating a selected state. Recommended for elements like Button, Card, or Field. Applying to all 4 sides at once is optional. |
|
--rh-color-border-subtle
|
Container border color |
|
--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.
