Your First UI

Create the button

1. Open your project in Studio.
2. Click + beside Components.
3. Choose Button.
4. Enter PlayButton and confirm.

Studio opens the new component. A component is a reusable part of a screen. You can place the same button on several screens and change it in one place.

Add it to a screen

Open a View from Views. Drag PlayButton from Components into the screen editor or onto a container in Hierarchy.

Studio adds both the component and its import. You do not need to type the file path yourself.

Change its look

Select the button in Hierarchy and follow its Inspector source link. Edit the component CSS to change size, spacing, color, typography, or hover styles.

You can also edit the source directly. A simple button looks like this:

<template>
  <button class="primary" @click="$emit('click')">Play</button>
</template>

<style scoped>
.primary {
  height: 54px;
  color: #eaf4ff;
  background-color: #101d2b;
  border-radius: 13px;
}

.primary:hover {
  transform: scale(1.03);
}
</style>

<template> describes what the component contains. <style> controls how it looks. :hover applies while the pointer is over the button.

Save the result

Press Ctrl+S or click Save. Studio formats and checks the file before it updates the preview. Problems appear in the Problems panel with a link to the affected line.

This button sends a local click event to its parent. To run game logic, follow Make a button run Blueprint. A direct game action does not require a script. Use Scripting for local UI behavior.