Modal

Modals are floating containers that can house straightforward messages or custom interfaces that are triggered contextually.

Overview

Modals are designed for interactions when the main interface cannot contain descriptions or workflows within a given space. Modals have a Scrim and lock the user into directly interacting with it. This can be useful when the user needs to perform an action or function to continue.

Modals should not be relied upon for primary workflows, and should be used sparingly.

Usage

  • Contextual workflows or messaging
  • Focused tasks
  • Error messaging
  • Onboarding

Sample

Accessibility

Focus order

The Modal's focus will navigate content sequentially to preserve meaning and expected use in support of Success Criterion 2.4.3: Focus Order. For this reason the first element depicted visually in the Modal will recieve keyboard focus, such as the component's close button (default).

Keyboard focus

It is strongly recommended to have focusable elements cycle through Modal where focusTrapDisabled is false (default) to support assistive technology users. The expected behavior for assistive technologies is while the component is open only the contents and focusable elements are accessible.

Keyboard navigation

KeyFunction
TabMoves focus to next focusable element. If the current focus is the last element and focusTrapDisabled is false, focus will cycle to the first element.
Tab and ShiftMoves focus to previous focusable element. If the current focus is the first element and focusTrapDisabled is false, focus will cycle to the last element.
EscIf escapeDisabled is false, closes the component.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.