XbListingWrapper # 

XbListingWrapper provides a slot dedicated for action buttons. The position of this slot will differ based on layout you choose.

To enable communication between actions slot content and its parent (XbListingWrapper), you can read the Vue.js documentation about Scoped Slot

In below example, we use 'legacy' layout. But you can choose to use 'default' layout.

To keep the whole layout clean and efficient, it is a good thing to follow best practices as below :

• Only show 1-2 buttons at the same time
• If on a certain cases, the page need more than 2 buttons, you should create a 'More Options' button and the rest of the button will be rendered as a dropdown when user click it.
• The buttons should be sorted by predicted frequency from the most to the least
• Each action button should have a representable icon and maximum 3 words on it