Code Patterns

Copy-paste examples for common plugin tasks. Commands, events, ECS, GUI, and more.

← Back to Patterns
ui

ui-button-styles

Define reusable button styles with hover and pressed states using TextButtonStyle. Styles are defined at the top of .ui files with @ prefix and referenced in TextButton elements.

Example Code

java
// Define styles at the top of your .ui file with @ prefix
@PrimaryButtonStyle = TextButtonStyle(
    Default: (Background: #3a7bd5, LabelStyle: (FontSize: 16, TextColor: #ffffff, RenderBold: true, RenderUppercase: true, HorizontalAlignment: Center, VerticalAlignment: Center)),
    Hovered: (Background: #4a8be5, LabelStyle: (FontSize: 16, TextColor: #ffffff, RenderBold: true, RenderUppercase: true, HorizontalAlignment: Center, VerticalAlignment: Center)),
    Pressed: (Background: #2a6bc5, LabelStyle: (FontSize: 16, TextColor: #ffffff, RenderBold: true, RenderUppercase: true, HorizontalAlignment: Center, VerticalAlignment: Center))
);

@SecondaryButtonStyle = TextButtonStyle(
    Default: (Background: #2b3542, LabelStyle: (FontSize: 16, TextColor: #96a9be, RenderBold: true, RenderUppercase: true, HorizontalAlignment: Center, VerticalAlignment: Center)),
    Hovered: (Background: #3b4552, LabelStyle: (FontSize: 16, TextColor: #b6c9de, RenderBold: true, RenderUppercase: true, HorizontalAlignment: Center, VerticalAlignment: Center)),
    Pressed: (Background: #1b2532, LabelStyle: (FontSize: 16, TextColor: #96a9be, RenderBold: true, RenderUppercase: true, HorizontalAlignment: Center, VerticalAlignment: Center))
);

// Use styles in buttons by referencing with @
TextButton #ActionButton {
    Text: "Action";
    Anchor: (Width: 140, Height: 44);
    Style: @PrimaryButtonStyle;
}

TextButton #CloseButton {
    Text: "Close";
    Anchor: (Width: 140, Height: 44);
    Style: @SecondaryButtonStyle;
}

Common Mistakes

Forgetting to define all three states (Default, Hovered, Pressed) - all are required for proper button feedback