@Niedzielski Please expand on ”Component can wrap any slotted content.“ What functionality do you have in mind?

@Volker_E, I was thinking the initial implementation would use a slot. In the boilerplate example, the slot would be replaced with Search pages containing <em>ba</em>. My reasoning was that this would allow the first iteration to focus on the button as a container with a button role.

Any slotted content is risky to me, we don't want a button that can carry an iframe to make the most extreme example.
What do we expect for a button to contain. Nothing interactive, nothing block.

Do we need to guard against that? Not that we should emulate everything other frameworks do but is there an example you can point me to that doesn't provide a slot? I couldn't fine one:

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VBtn/VBtn.ts
https://github.com/buefy/buefy/blob/dev/src/components/button/Button.vue#L1
https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/button#element-type
https://github.com/airyland/vux/blob/v2/src/components/x-button/index.vue#L1
https://github.com/ElemeFE/element/blob/dev/packages/button/src/button.vue#L1
https://github.com/myliang/fish-ui/blob/master/src/components/Button.vue
https://github.com/museui/muse-ui/blob/master/src/Button/Button.js
https://github.com/vuematerial/vue-material/blob/dev/src/components/MdButton/MdButton.vue
https://github.com/view-design/ViewUI/blob/master/src/components/button/button.vue
https://github.com/JosephusPaye/Keen-UI/blob/next/src/UiButton.vue

If someone puts an iframe in a button, I think it's just like HTML5 where garbage-in gives you garbage-out. In my understanding, this problem can be solved by documentation if it needs to be solved at all.

Regarding T255902 acceptance criteria:

Component template is guided by the above skeleton structure.

Done

Component follows the WAI best-practice and applies descriptive ARIA roles and attributes.

I didn't add any since it's a semantic and literal button element. If you see something that should be there, please let me know.

Component styling is guided by OOUI CSS properties, uses WikimediaUI Base variables and follows BEM conventions.

Done.

Component is documented with a couple configurations in Storybook.

Done.

Component has Jest tests for at least the snapshots.

Done.

Any functions or methods added have a JSDoc description and TypeScript typing.

Done.

Any lessons learned, development tips, and usage notes wanted are documented in the readme or the migration guide.

I revised the linter config but didn't see any other changes to make.

Update the skeleton in this task too so it's easy to see what is being targeted for subsequent components.

Done.