Modal

Modal shell and modal-card helpers for dialog and confirmation flows.

Bulma Pattern

This wrapper follows Bulma's Components markup. Compare class behavior with the official Bulma docs.

Supported tags

Example

<modal active>
  <modal-background></modal-background>
  <modal-card>
    <modal-card-head>
      <modal-card-title>Delete item?</modal-card-title>
      <modal-close ariaLabel="close"></modal-close>
    </modal-card-head>
    <modal-card-body>
      This action cannot be undone.
    </modal-card-body>
    <modal-card-foot>
      <button danger>Delete</button>
      <button>Cancel</button>
    </modal-card-foot>
  </modal-card>
</modal>

Usage Notes

Use `active` on `<modal>` to toggle visible state.
Includes `modal-card` family tags for full dialog structure.
`<modal-close>` supports size modifiers and `ariaLabel`.

Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.