BorderColor for button doesn't work

[3TSloth]

I'm hoping someone can explain why my menu button ("New Game") doesn't respect the BorderColor component.

I've looked at the code shown here https://bevy.org/examples/ui-user-interface/borders/ but can't figure out why it's not working for me.

Here's my code:

use bevy::{
    app::{App, AppExit, Plugin, Update},
    ecs::{
        component::Component,
        entity::Entity,
        event::EventWriter,
        name::Name,
        query::Changed,
        system::{Commands, Query, ResMut},
    },
    prelude::{BackgroundColor, Color, IntoScheduleConfigs, Node, With, World},
    state::{
        condition::in_state,
        state::{NextState, OnEnter, OnExit},
        state_scoped::StateScoped,
    },
    ui::{
        AlignContent, AlignItems, BorderColor, BorderRadius, Display, GridPlacement, GridTrack,
        Interaction, JustifyItems, Val,
        widget::{Button, Text},
    },
    utils::default,
};

pub struct MainMenuPlugin;

const NORMAL_BUTTON: Color = Color::NONE;
const HOVERED_BUTTON: Color = Color::srgb(0.0, 0.0, 1.0);
const HOVERED_PRESSED_BUTTON: Color = Color::srgb(0.25, 0.65, 0.25);
const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);

// Tag component used to mark which setting is currently selected
#[derive(Component)]
struct SelectedOption;

#[derive(Component)]
struct OnMainMenuScreen;

// All actions that can be triggered from a button click
#[derive(Component)]
enum MenuButtonAction {
    Play,
    Quit,
}

impl Plugin for MainMenuPlugin {
    fn build(&self, app: &mut App) {
        app.add_systems(OnEnter(GameState::MainMenu), main_menu)
            .add_systems(
                OnExit(GameState::MainMenu),
                despawn_screen::<OnMainMenuScreen>,
            )
            .add_systems(
                Update,
                (menu_action, button_system).run_if(in_state(GameState::MainMenu)),
            );
    }
}

fn main_menu(world: &mut World) {
    world
        .spawn((
            Name::new("MainMenu"),
            OnMainMenuScreen,
            StateScoped(GameState::MainMenu),
            Node {
                display: Display::Grid,
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                grid_template_columns: vec![
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                ],
                grid_template_rows: vec![
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                ],
                ..default()
            },
        ))
        .with_children(|main_menu_layout| {
            main_menu_layout
                .spawn(Node {
                    display: Display::Grid,
                    grid_row: GridPlacement::start(2),
                    grid_column: GridPlacement::start(2),

                    ..default()
                })
                .with_children(|menu_options| {
                    menu_options
                        .spawn((Node {
                            display: Display::Grid,
                            align_items: AlignItems::Start,
                            align_content: AlignContent::SpaceEvenly,
                            justify_items: JustifyItems::Center,
                            ..default()
                        },))
                        .with_children(|menu_buttons| {
                            menu_buttons.spawn((
                                Node { ..default() },
                                BackgroundColor(NORMAL_BUTTON),
                                Text::new("New Game"),
                                Button,
                                MenuButtonAction::Play,
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                                BorderColor(Color::srgb(1., 0., 0.)),
                            ));
                            menu_buttons.spawn((
                                Node { ..default() },
                                Button,
                                Text::new("Load Game"),
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                            ));
                            menu_buttons.spawn((
                                Node { ..default() },
                                Button,
                                Text::new("Settings"),
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                            ));
                            menu_buttons.spawn((
                                Node { ..default() },
                                Button,
                                Text::new("Quit"),
                                MenuButtonAction::Quit,
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                            ));
                        });
                });
        });
}

fn button_system(
    mut interaction_query: Query<
        (&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
        (Changed<Interaction>, With<Button>),
    >,
) {
    for (interaction, mut background_color, selected) in &mut interaction_query {
        *background_color = match (*interaction, selected) {
            (Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
            (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
            (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
            (Interaction::None, None) => NORMAL_BUTTON.into(),
        };
    }
}

fn menu_action(
    interaction_query: Query<
        (&Interaction, &MenuButtonAction),
        (Changed<Interaction>, With<Button>),
    >,
    mut app_exit_events: EventWriter<AppExit>,
    mut game_state: ResMut<NextState<GameState>>,
) {
    for (interaction, menu_button_action) in &interaction_query {
        if *interaction == Interaction::Pressed {
            match menu_button_action {
                MenuButtonAction::Quit => {
                    app_exit_events.write(AppExit::Success);
                }
                MenuButtonAction::Play => {
                    game_state.set(GameState::InGame);
                }
            }
        }
    }
}

fn despawn_screen<T: Component>(to_despawn: Query<Entity, With<T>>, mut commands: Commands) {
    for entity in &to_despawn {
        commands.entity(entity).despawn();
    }
}

[tim-blackbird]

Node borders have a width of 0 by default so they cannot be seen. You need to set the border field on Node to make them show up.

[3TSloth]

Thank you, but I forgot to mention I had tried that as well and still no luck (I've marked it where I've added it below):

use crate::game_states::game_states::GameState;

use bevy::{
    app::{App, AppExit, Plugin, Update},
    ecs::{
        component::Component,
        entity::Entity,
        event::EventWriter,
        name::Name,
        query::Changed,
        system::{Commands, Query, ResMut},
    },
    prelude::{BackgroundColor, Color, IntoScheduleConfigs, Node, With, World},
    state::{
        condition::in_state,
        state::{NextState, OnEnter, OnExit},
        state_scoped::StateScoped,
    },
    ui::{
        AlignContent, AlignItems, BorderColor, BorderRadius, Display, GridPlacement, GridTrack,
        Interaction, JustifyItems, UiRect, Val,
        widget::{Button, Text},
    },
    utils::default,
};

pub struct MainMenuPlugin;

const NORMAL_BUTTON: Color = Color::NONE;
const HOVERED_BUTTON: Color = Color::srgb(0.0, 0.0, 1.0);
const HOVERED_PRESSED_BUTTON: Color = Color::srgb(0.25, 0.65, 0.25);
const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);

// Tag component used to mark which setting is currently selected
#[derive(Component)]
struct SelectedOption;

#[derive(Component)]
struct OnMainMenuScreen;

// All actions that can be triggered from a button click
#[derive(Component)]
enum MenuButtonAction {
    Play,
    Quit,
}

impl Plugin for MainMenuPlugin {
    fn build(&self, app: &mut App) {
        app.add_systems(OnEnter(GameState::MainMenu), main_menu)
            .add_systems(
                OnExit(GameState::MainMenu),
                despawn_screen::<OnMainMenuScreen>,
            )
            .add_systems(
                Update,
                (menu_action, button_system).run_if(in_state(GameState::MainMenu)),
            );
    }
}

fn main_menu(world: &mut World) {
    world
        .spawn((
            Name::new("MainMenu"),
            OnMainMenuScreen,
            StateScoped(GameState::MainMenu),
            Node {
                display: Display::Grid,
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                grid_template_columns: vec![
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                ],
                grid_template_rows: vec![
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                    GridTrack::flex(1.0),
                ],
                ..default()
            },
        ))
        .with_children(|main_menu_layout| {
            main_menu_layout
                .spawn(Node {
                    display: Display::Grid,
                    grid_row: GridPlacement::start(2),
                    grid_column: GridPlacement::start(2),

                    ..default()
                })
                .with_children(|menu_options| {
                    menu_options
                        .spawn((Node {
                            display: Display::Grid,
                            align_items: AlignItems::Start,
                            align_content: AlignContent::SpaceEvenly,
                            justify_items: JustifyItems::Center,
                            ..default()
                        },))
                        .with_children(|menu_buttons| {
                            menu_buttons.spawn((
                                Node {
                                    //--------------------------------------->ADDING BORDER HERE
                                    border: UiRect::all(Val::Px(20.0)),
                                    ..default()
                                },
                                BackgroundColor(NORMAL_BUTTON),
                                Text::new("New Game"),
                                Button,
                                MenuButtonAction::Play,
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                                BorderColor(Color::srgb(1., 0., 0.)),
                            ));
                            menu_buttons.spawn((
                                Node { ..default() },
                                Button,
                                Text::new("Load Game"),
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                            ));
                            menu_buttons.spawn((
                                Node { ..default() },
                                Button,
                                Text::new("Settings"),
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                            ));
                            menu_buttons.spawn((
                                Node { ..default() },
                                Button,
                                Text::new("Quit"),
                                MenuButtonAction::Quit,
                                BorderRadius::new(
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                    Val::Px(40.),
                                ),
                            ));
                        });
                });
        });
}

fn button_system(
    mut interaction_query: Query<
        (&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
        (Changed<Interaction>, With<Button>),
    >,
) {
    for (interaction, mut background_color, selected) in &mut interaction_query {
        *background_color = match (*interaction, selected) {
            (Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
            (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
            (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
            (Interaction::None, None) => NORMAL_BUTTON.into(),
        };
    }
}

fn menu_action(
    interaction_query: Query<
        (&Interaction, &MenuButtonAction),
        (Changed<Interaction>, With<Button>),
    >,
    mut app_exit_events: EventWriter<AppExit>,
    mut game_state: ResMut<NextState<GameState>>,
) {
    for (interaction, menu_button_action) in &interaction_query {
        if *interaction == Interaction::Pressed {
            match menu_button_action {
                MenuButtonAction::Quit => {
                    app_exit_events.write(AppExit::Success);
                }
                MenuButtonAction::Play => {
                    game_state.set(GameState::InGame);
                }
            }
        }
    }
}

fn despawn_screen<T: Component>(to_despawn: Query<Entity, With<T>>, mut commands: Commands) {
    for entity in &to_despawn {
        commands.entity(entity).despawn();
    }
}

[tim-blackbird]

I tested it and it appears there are some issues with having a Text component on the same entity.
Try adding the Text component as a child of the button instead:

menu_buttons.spawn((
    Node {
        border: UiRect::all(Val::Px(20.0)),
        ..default()
    },
    BackgroundColor(NORMAL_BUTTON),
    // Text::new("New Game"), // Remove this
    Button,
    MenuButtonAction::Play,
    BorderRadius::new(
        Val::Px(40.),
        Val::Px(40.),
        Val::Px(40.),
        Val::Px(40.),
    ),
    BorderColor(Color::srgb(1., 0., 0.)),
)).with_child(Text::new("New Game")); // Add the child here

[3TSloth]

Thank you, that was it!