Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Site status

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-site-statusImportingUsagerh-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>
Copy to Clipboard Wrap lines

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>
Copy to Clipboard Wrap lines

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.

Slots 1

Slot Name Summary Description
loading-text

Localized loading text for screen reader announcement via aria-live polite region

Attributes 0

None

Methods 0

None

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 0

None

Design Tokens 17

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

2px border width: Example: Alert
--rh-color-border-interactive

Link focus outline color
--rh-border-radius-default

Border radius container

Link focus border radius

3px border radius; Example: Card
--rh-size-icon-01

Status Icon width

Status Icon height

16px icon box
--rh-color-white

Status Icon color

Lightest surface (light theme) or primary text (dark theme)
--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
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify