Vrembem | Modal

Dialogs that block interaction with other elements on the page.

npm install @vrembem/modal

@use "@vrembem/modal";

Options

Modal is built as a Sass module. Sass options are used to control CSS output, while design token CSS variables control the styling of the component. Below are the available configuration options.

Sass

Modal comes with the following Sass configuration options that can be set using either the config module or Sass with clause methods.

@use "@vrembem/modal" with (
  $config: (
    // A map of CSS variable overrides to pass to the panel component if used
    // @type map
    "panel-override": (
      "box-shadow": tokens.get("box-shadow-xl")
    ),

    // Map for outputting modal--size-[key] modifier variants
    // @type map
    "size": (
      "default": 32rem,
      "xs": 16rem,
      "sm": 24rem,
      "lg": 40rem,
      "xl": 48rem
    )
  )
);

Design tokens

Modal uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

Variable	Fallback
`--vb-modal-width` Copied!	`32rem` Copied!
`--vb-modal-max-width` Copied!	`calc(100% - var(--vb-modal-offset, 1rem) * 2)` Copied!
`--vb-modal-offset` Copied!	`1rem` Copied!
`--vb-modal-travel` Copied!	`5rem` Copied!
`--vb-modal-full-scale` Copied!	`0.75` Copied!
`--vb-modal-transition-duration` Copied!	`var(--vb-transition-duration)` Copied!
`--vb-modal-transition-timing-function` Copied!	`var(--vb-transition-timing-function)` Copied!
`--vb-modal-transition-property` Copied!	`opacity, display, transform, overlay` Copied!
`--vb-modal-backdrop-color` Copied!	`var(--vb-backdrop-color)` Copied!
`--vb-modal-backdrop-opacity` Copied!	`var(--vb-backdrop-opacity)` Copied!

There are no variables that match your search.

Basic usage

Modals are built on the native <dialog> element. The basic structure of a modal is a <dialog> element with a unique id, the modal class, and the closedby="any" attribute. Triggers use the command and commandfor attributes to open and close modals.

<button command="show-modal" commandfor="[unique-id]">...</button>

<dialog id="[unique-id]" class="modal" closedby="any">
  <button command="close" commandfor="[unique-id]">...</button>
  ...
</dialog>

Authors should provide modal dialogs with aria-labelledby and aria-describedby attributes if applicable to further improve accessibility.

<dialog id="[unique-id]" class="modal panel" closedby="any" aria-labelledby="dialog-title" aria-describedby="dialog-description">
  <div class="panel__header">
    <h2 class="panel__title" id="dialog-title">...</h2>
    <button class="link" command="close" commandfor="[unique-id]">Close</button>
  </div>
  <div class="panel__body">
    <p id="dialog-description">...</p>
  </div>
  <div class="panel__footer">
    ...
  </div>
</dialog>

The panel component is a great fit for styling a modal. This can be applied directly on the modal component and expanded as needed, e.g.: class="modal panel".

Modifier that adds styles to a modal to make it fill the entire viewport when opened.

<dialog id="[unique-id]" class="modal modal--full" closedby="any">...</dialog>

The default modal position is centered in the viewport. The position modifier allows positioning a modal to the top, bottom, left or right side of the document viewport instead.

<dialog id="[unique-id]" class="modal modal--pos-top" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--pos-left" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--pos-right" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--pos-bottom" closedby="any">...</dialog>

Available variants

modal--pos-top
modal--pos-left
modal--pos-right
modal--pos-bottom

Converts a modal into a drawer-style overlay that anchors to a viewport edge. Use with modal--pos-[key] to control which edge the drawer slides in from.

<dialog id="[unique-id]" class="modal modal--drawer modal--pos-top" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--drawer modal--pos-left" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--drawer modal--pos-right" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--drawer modal--pos-bottom" closedby="any">...</dialog>

Adjust the size of a modal by increasing or decreasing its width. The modal's max-width property prevents the modal from overflowing the viewport. These modifiers are generated using key/value pairs of the modal-size config options map.

<dialog id="[unique-id]" class="modal modal--size-xs" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--size-sm" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--size-lg" closedby="any">...</dialog>
<dialog id="[unique-id]" class="modal modal--size-xl" closedby="any">...</dialog>

Available variants

modal--size-xs
modal--size-sm
modal--size-lg
modal--size-xl

Edit page

Notice

Menu

On this page

Options

Sass

Design tokens

Basic usage