A component for removing an element from the DOM or hiding it with a CSS class.

npm version

npm install @vrembem/dismissible
import { Dismissible } from "@vrembem/dismissible"


Dismissible uses two data attributes to utilize it’s functionality. The first is a trigger, created using the data-dismiss attribute on a button or anchor element. The second is a parent element of the trigger created using data-dismissible. You can optionally pass a dismiss method to either hide an element using a class or remove it from the DOM.

  • data-dismissible="[method]"
  • data-dismiss
<div data-dismissible>
  <button data-dismiss>Dismiss</button>
<div data-dismissible="hide">
  <button data-dismiss>Hide method</button>
<div data-dismissible="remove">
  <button data-dismiss>Remove method</button>

dismissible + notice

This is a notice message

<div data-dismissible class="notice notice_state_success">
  <div class="notice__body">...</div>
  <div class="notice__actions">
    <button data-dismiss class="icon-action">...</button>

dismissible + dialog

Dismissible Dialog

This is a sample dialog using the dismissible component.

<div data-dismissible class="dialog">
  <div class="dialog__header">
    <h2 class="dialog__title">...</h2>
    <button data-dismiss class="icon-action icon-action_color_subtle">...</button>
  <div class="dialog__body">...</div>
  <div class="dialog__footer flex_justify_end">
    <div class="button-group">
      <button data-dismiss class="button button_color_primary">...</button>
      <button data-dismiss class="button">...</button>

Dismissible Settings

Key Default Description
autoInit false Automatically instantiates the instance
dataTrigger "dismiss" Data attribute for a dismiss trigger
dataTarget "dismissible" Data attribute for a dismissible element

Dismissible API

Name Description
modal.init() Initializes the dismissible instance
modal.destroy() Destroys and cleans up the dismissible instantiation