Luna UI Documentation

USS-styled variant of the built-in UnityEngine.UIElements.Button — no custom subclass. The classes are layered: btn carries only the interaction feel (press/hover scale, transition, cursor), and btn-solid opts into Luna's design-system look. Combine size, color, and visual-style classes freely on top.

Setup

xml

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <ui:Button class="btn btn-solid" />
    <ui:Button class="btn btn-solid btn-lg" />
    <ui:Button class="btn btn-solid red" />
    <ui:Button class="btn btn-solid btn-xl violet" />
    <ui:Button class="btn btn-solid btn-xl violet ghost" />
    <ui:Button class="btn btn-solid btn-xl violet masked" />
    <ui:Button class="btn btn-solid btn-xl violet outline" />
</ui:UXML>

Layering: feel vs. look

btn alone applies no visuals: no background, no 9-slice, no sizing clamp, no font, and it neutralizes Unity's default .unity-button chrome (gray fill, 1px border, 3px radius, padding) so nothing renders under your art. That makes it the right base for art-skinned buttons, where the old bundled skin used to shred sprites (slice settings) and clamp sizes (a 200x200 circular sprite button was clamped to 64px tall):

xml

<!-- Sprite-skinned button: art untouched, Luna press/hover feel -->
<ui:Button class="btn" style="background-image: url('...'); width: 200px; height: 200px;" />

<!-- Default design-system button -->
<ui:Button class="btn btn-solid" />

btn-solid carries the default look: slices and slice-scale, min/max sizing, padding, border radius, typography, and the solid background colors. It is named after the component-library convention for the default filled variant (Chakra, DaisyUI, Radix all call it solid).

Migration (breaking). Before this split, btn alone carried the full look. The migration is mechanical: class="btn" becomes class="btn btn-solid" wherever the default look is wanted, including buttons using ghost / outline / color modifiers, which inherit their sizing and typography from the solid skin. The new pair resolves identically to the old single class. Buttons that carry their own sprite art can drop to bare btn and lose the slice/size mangling.

CSS classes

Base

Class	Description
`btn`	Interaction feel only: press/hover scale, transition, cursor. Required base class.
`btn-solid`	The default look: slices, sizing, padding, radius, typography, solid colors.

Size

Class	Description
`btn-sm`	Small
`btn-lg`	Large
`btn-xl`	Extra-large

Color

Add a color name as a class (no value). Available palette: see colors.

xml

<ui:Button class="btn btn-solid teal" />

Visual style

Class	Description
`ghost`	Transparent background, text/icon in the button-color. Hover/focus: text/icon shift to the hover tone — the background stays transparent.
`masked`	Transparent background. Hover/focus: button-color class becomes the background; text color stays.
`outline`	Border in the button-color class; text color matches the border.

Visual-style classes pair with btn btn-solid: they override the solid background and colors while inheriting its sizing and typography.

"Focus" in this table, and in every button state, means a focus the player should see (see Focus below), not any :focus.

Animation

Buttons scale to 1.08 on hover and 0.92 on press, with a 0.16s ease-out transition (hover only, not focus: a UITK Button keeps :focus after a tap, so scaling on focus would leave tapped buttons resting oversized). To opt out without changing any other styling, add no-scale.

Class	Description
`no-scale`	Disables the hover/press scale animation.

xml

<ui:Button class="btn btn-solid violet no-scale" />

Focus

A UI Toolkit Button keeps :focus after it is tapped or clicked, so a look keyed on :focus also marks the last thing clicked. Luna's button looks key on the luna-focus-visible class instead, which LunaFocusVisible puts on the focused element only when the focus came from a keyboard or gamepad move (or from code after one). A keyboard or gamepad player sees the hover tone and, on btn-solid, the focus ring (--btn-border-focus); a tapped button keeps its rest look.

Style your own focus look the same way:

css

.my-row.luna-focus-visible,
.my-row.luna-focus-visible:enabled {
  border-color: var(--my-focus-ring);
}

Keep the :enabled rank next to the plain one: btn neutralizes the Unity theme's button states at :focus:enabled, and a rule at a lower rank loses to it. For the same reason a variant whose rest look that neutralizer clears restates its rest look at :focus:enabled: btn-solid its fill, outline its edge, soft its fill. The clear variants that sit on btn-solid (ghost, outline, link, masked) restate their clear fill there as well, so a tapped btn btn-solid ghost stays clear. If your theme fills a btn-solid through its own class rather than --btn-bg, restate that fill at :focus:enabled too, or a tapped button shows --btn-bg.

Button