Mithril JS Bootstrap 4 modal dialog component

app(es6).js

//usage
import modal from './modal(es6)'
var state = {
  showDialog: false,
  onOk() {
    console.log('OK pressed')
  },
  onCancel() {
    console.log('Cancel pressed')
  }
}
var app = {
  view: (vnode) => {
    return m('.container', [
      m('button.btn.btn-primary[type=button]', {onclick: () => { state.showDialog = true }}, "Show dialog"),
      state.showDialog ? 
        m(modal, {
          title: "Modal demo",
          body: "Now you see",
          buttons: [
            m('button.btn.btn-primary[type=button]', {onclick: state.onOk}, "Ok"),
            m('button.btn.btn-secondary[type=button]', {onclick: state.onCancel}, "Close"),
          ]
        }) : null
    ])
  }
}

app.css

modal {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
}

modal(es6).js

import m from 'mithril'

const Modal = {
    view: (vnode) => {
        var ui = vnode.state;
        return m('modal[tabindex=-1][role=dialog]', [
            m('.modal-dialog[role=document]', [
                m('.modal-content', [
                    m('.modal-header', [
                        m('h5.modal-title', vnode.attrs.title || "Are you sure?"),
                    ]),
                    m('.modal-body', [
                        m('div', vnode.attrs.body || '')
                    ]),
                    m('.modal-footer', vnode.attrs.buttons)
                ])
            ])
        ])
    }
}

export default Modal;