Dialog

Reference

• Root

  The root container that manages the state and behavior of the dialog system. Coordinates the interaction between trigger, content, and optional backdrop components.

  • Attributes

    • default-open

      boolean

      /

      default: false

      The initial open state of the dialog when rendered. Use when you do not need to control its open state.

    • modal

      boolean

      /

      default: true

      When true, interaction with elements outside the dialog will be disabled and only dialog content will be visible to screen readers.

    • open

      boolean

      /

      default: -

      The controlled open state of the dialog. Must be used in combination with onOpenChange.

  • Events

    • onOpenChange

      Event handler called when the open state of the dialog changes.

• Trigger

  A wrapper component that must contain an sc-button. The button controls the visibility of the dialog content and automatically receives the appropriate ARIA attributes.

• Portal

  Renders the backdrop and content into the CSS top layer, ensuring proper stacking context and visibility above other page elements.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

• Backdrop

  An overlay that covers the inert portion of the view when the dialog is open. Typically used to enhance focus on the dialog content and prevent interaction with elements behind it.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

  • Classes

    • close-transition

      Applied during the closing transition and removed when fully closed.

    • open

      Applied when the dialog is in an open state.

    • open-transition

      Applied during the opening transition and removed when fully open.

• Content

  The container that holds the dialog's content. Manages keyboard interactions and focus trapping when in modal mode.

  • Attributes

    • aria-described-by

      string

      /

      default: -

      References the ID of the element that describes the dialog's purpose.

    • aria-labelled-by

      string

      /

      default: -

      References the ID of the element that labels the dialog, typically the dialog's title.

    • close-autofocus

      boolean

      /

      default: true

      When true, returns focus to the trigger button after the dialog closes.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • open-autofocus

      boolean

      /

      default: true

      When true, automatically focuses the first focusable element in the content when opened.

    • role

      string

      /

      default: dialog

      Defines the role of the dialog.

  • Events

    • onClickOutside

      Event handler called when a click occurs outside the dialog content.

    • onCloseTransitionEnd

      Event handler called when the closing transition completes.

    • onEscapeKeydown

      Event handler called when the Escape key is pressed while the dialog is active.

    • onOpenTransitionEnd

      Event handler called when the opening transition completes.

  • Classes

    • close-transition

      Applied during the closing transition.

    • closing

      Applied when the dialog is closing. It is useful if you want to achieve different opening and closing transitions.

    • open

      Applied when the dialog is in an open state.

    • open-transition

      Applied during the opening transition.

• Scroll Area

  A scrollable container that allows scrolling in a dialog, which is in modal mode. All scrolling outside of this container will be prevented.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying HTML element for DOM manipulation.

• Close

  A wrapper for an sc-button that handles dialog closure. Automatically assigns appropriate ARIA roles to the button.