Skip to content

Latest commit

 

History

History
61 lines (45 loc) · 2.7 KB

modal.mdx

File metadata and controls

61 lines (45 loc) · 2.7 KB
Raw
title description draft
Modal
Grafana Labs Modal component
false

Modal

Overview

Modals are used to display content to users that needs immediate attention or is critical to their current user flow. When a modal is open, users are unable to interact with the on-page content behind the modal and cannot return to the previous workflow until the user completes the requirement or dismisses the modal.

When to Use

  • There is a need for an immediate response from the user.
  • Notify the user of urgent information concerning their current work.
  • Confirm a user decision.

When not to use

  • Avoid using a modal when the task should be repeatedly done by the user.
  • Do not use modals for non-essential information that’s not related to the current workflow.

Usage

The main component has these props:

  • title - title for the modal or custom header element
  • className
  • contentClassName - specific class for the content of the modal
  • closeOnEscape
  • closeOnBackdropClick
  • trapFocus - whether to restore focus back to the element that was focused when the focus scope mounted, after the focus scope unmounts.
  • isOpen
  • onDismiss
  • onClickBackdrop - if not set will call onDismiss if that is set

ModalTabsHeader - custom header element with tabs that has the following props:

  • icon
  • title
  • tabs
  • activeTab
  • onChangeTab

Types and Behaviors

  1. Basic Modal: the basic modal with the default header, main content, close buttons and/or action buttons.

  2. Modal using the contentClassName prop: in this case the modal content has applied a specific class.

  3. Modal with tabs: in this ocassion, the modal has tabs, each of one with its main content and buttons.

Accessibility

Dialog (Modal) Pattern Please check the keyboard's behaviour when building a modal. We have noticed that when the content is overflowing, the user cannot scroll it unless:

  • The modal contains interactive elements, such as buttons, on the bottom.
  • The content has tabIndex = 0, and therefore, it can be keyboard-focusable.

Links & Resources

Storybook Library

Playground