Create a Component

Create the file

1. Open your project in Studio.
2. Click + beside Components, choose Button, and name it MenuButton.
3. Replace its source with this small example and save:

<template>
  <button class="menu-button" @click="$emit('click')">{{ props.label }}</button>
</template>

<style scoped>
.menu-button {
  padding: 12px 20px;
  color: #ffffff;
  background-color: #17314a;
  border-radius: 8px;
}
</style>

props.label is text supplied by the View using this button. $emit('click') notifies that View when the button is clicked.

Place it in a View

Drag MenuButton into the View from Components. Studio adds the import. Set its label in the View source:

<MenuButton label="Play" />
<MenuButton label="Settings" />

Save and show the View in Preview. It should contain two buttons with different labels. Editing .menu-button changes both buttons.

A label does not implement a gameplay response. Follow Component events to handle the click in the parent, or Make a button run Blueprint to connect a button to Unreal.

When previewing MenuButton alone, set its label value in Inspector. That sample value is only for Preview; Views still pass their own labels.