Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:

Design system switcher

Version:

Design system switcher

Theme:

Design system switcher

Version:

Design system switcher

Idle Timeout

A component that counts down to the end of a session (behind the scenes) and shows a warning message after a set amount of time of inactivity.

Examples

Code

React

Review Storybook for React guidance of this component.

Style customization

The following CSS variables can be overridden to customize Dialog components:

CSS variables for dialog
VariableDefault Core Theme Value
--dialog__background-colorhex value: #ffffff--color-background
--dialog-overlay__background-colorhex value: #00000080--color-transparent-black-alpha50
--dialog__padding--spacer-4

Guidance

When to use

  • Use the IdleTimeout for authenticated sessions to force logout after a set amount of time on inactivity

Component maturity

For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.

Accessibility

  • Color

    Meets AA color contrast standards for accessibility and color blindness.
    Complete
  • Forced Colors Mode (FCM)

    While using FCM the components text is legible and improves readability.
    Complete
  • WCAG 2.1 Level AA Conformance

    All Axe checks for WCAG AA compliance have passed.
    Complete
  • Screen readers

    VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
    Complete
  • Keyboard navigation

    Component is fully navigable with a keyboard.
    Complete

Code

  • Storybook

    Component has stories to cover all defined props.
    Complete
  • Responsive

    Component designed to work in all responsive breakpoints.
    Complete
  • Spanish translations

    Includes Spanish translations for default text content.
    Incomplete

Tokens

  • Code

    Tokens implemented in code.
    Complete
  • Design

    Tokens implemented in Figma.
    Incomplete