You can provide your own modal footer containing your own button instances. The modal slots are scoped and giving access to the ok(), cancel() methods (for closing the modal, by adding @click="ok", etc on your buttons)

https://bootstrap-vue.js.org/docs/components/modal#custom-rendering-with-slots

Example:

<b-modal ... >
  <template slot="footer" slot-scope="{ ok, cancel }">
    <b-button @click="cancel" variant="danger" data-foo="bar">Cancel</b-button>
    <b-button @click="ok" variant="primary" data-baz="buz">OK</b-button>
  </template>
  Modal message content here
</b-modal>

This gives you complete control over the attributes, style, etc of the buttons and any additional content you want in the footer.

Adding in additional support props for assigning arbitrary attributes (and the code to handle the prop), etc, will increase the <b-modal> code size, adding additional bloat. The scoped slots were designed for this very reason (the default content of buttons is provided for convenience).

You could take the above one step further if you use this often, by creating a helper component to render the buttons:

<b-modal ... >
  <my-modal-buttons slot="footer" slot-scope="scope" methods="scope" foo="baz" bar="buz">
  </my-modal-buttons>
  Modal message content here
</b-modal>

And define `my-modal-buttons" as:

<template>
  <div>
    <b-button @click="methods.cancel" variant="danger" :data-foo="foo">Cancel</b-button>
    <b-button @click="methods.ok" variant="primary" :data-baz="baz">OK</b-button>
  </div>
</template>

<script>
export default {
  name: 'MyModalButtons',
  props: {
    methods: { type: Object, default: () => ({}) },
    foo: { type: String },
    baz: { type: String }
  }
}
</script>

@tmorehouse you recently made changes where previously one could add custom attributes such as data- attributes to many of the elements and now all of a sudden those are ignored.. It really broke my app in many ways (I too was using data-cy for cypress testing) and is requiring a lot of workarounds

I wish you just simply allowed custom data- attributes to be added on ALL your components

@vesper8 I'm not sure what you mean... You can on any component add custom attributes on the rendered root element. All attributes are transferred to the root element of the component.

<b-xxxxx data-foo="bar"></b-xxxxx> will render data-foo="bar" onto the components root element.

Can you provide an example of which components you are referring to?