Button

USS-styled variant of the built-in UnityEngine.UIElements.Button — no custom subclass. Add the btn class plus modifiers to get Luna's design-system look. Combine size, color, and visual-style classes freely.

Button Component

Setup

html
<engine:Button class="btn" /> <engine:Button class="btn btn-lg" /> <engine:Button class="btn red" /> <engine:Button class="btn btn-xl violet" /> <engine:Button class="btn btn-xl violet ghost" /> <engine:Button class="btn btn-xl violet masked" /> <engine:Button class="btn btn-xl violet shade" /> <engine:Button class="btn btn-xl violet outline" />

CSS classes

Size

ClassDescription
btnRequired base class
btn-smSmall
btn-lgLarge
btn-xlExtra-large

Color

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

html
<engine:Button class="btn teal" />

Visual style

ClassDescription
ghostTransparent background. Hover/focus: semi-transparent black background and the button-color class becomes the text color.
maskedTransparent background. Hover/focus: button-color class becomes the background; text color stays.
shadeLike ghost but the semi-transparent black background is always visible. Combine with ghost to also change text color on hover.
outlineBorder in the button-color class; text color matches the border.

See also

Settings

Theme

Light

Contrast

Material

Dark

Dim

Material Dark

System

Sidebar(Light & Contrast only)

Light
Dark

Font Family

DM Sans

Wix

Inclusive Sans

AR One Sans

Direction

LTR
RTL