Guides UI Style Buttons with Fonts and State Images

UI 2 min read Updated Apr 2026

Style Buttons with Fonts and State Images

Buttons can carry their own font and their own images for each interaction state.

This lets you make buttons feel like part of the rest of your UI instead of defaulting to one shared look everywhere.

What You Can Style

For each Button, you can assign:

  • Font
  • Default Image
  • Hover Image
  • Pressed Image
  • Disabled Image

You can also use the colour fields to reinforce each state visually.

Step 1: Assign a Button Font

Select the Button in the hierarchy and open the Button card in the Inspector.

From there, you can:

  • pick a font from the popup
  • drag a font asset onto the field
  • clear the field to use the default bundled font

This is useful when:

  • a menu button needs a display font
  • a title screen needs a more expressive type style
  • a HUD button needs tighter visual alignment with the rest of your art direction

Step 2: Assign State Images

Use the image fields in the same Button card:

  • Default Image for the idle state
  • Hover Image while the pointer is over the button
  • Pressed Image while the button is being pressed
  • Disabled Image when the button is not interactable

Start by assigning the default image first. Then add the other state images where you want the visual to change.

Step 3: Use Colour as Support

If a state image is empty, Lenga falls back to the default image and the state colour.

If no image is assigned at all, the button is drawn with its colour fields.

That means colours still matter even when you are working with image-driven buttons.

A Good Workflow

For most menus:

  1. assign the default image
  2. assign the font
  3. add hover and pressed images
  4. tune the colours for state feedback

That gives you a stable base before you start polishing.

What Comes Next