How do I colour buttons and where can I find the corresponding descriptions for button() and Response?

[Guelakais]

I've tried the following:

use bevy::prelude::*;
use bevy_egui::{egui, EguiContexts, EguiPlugin};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin)
        .add_systems(Update, (ui_example_system, header_bar))
        .run();
}

fn ui_example_system(mut contexts: EguiContexts) {
    egui::Window::new("Hello").show(contexts.ctx_mut(), |ui| {
        ui.label("world");
    });
}

fn header_bar(mut contexts: EguiContexts) {
    egui::TopBottomPanel::top("header_bar").show(contexts.ctx_mut(), |ui| {
        // Create an array of button labels for easier management
        ui.horizontal(|ui| {
            [
                ("Button 1", egui::Color32::GREEN),
                ("Button 2", egui::Color32::BLUE),
                ("Button 3", egui::Color32::RED),
                ("Button 4", egui::Color32::YELLOW),
                ("Button 5", egui::Color32::DARK_RED),
            ]
            .into_iter()
            .for_each(|(label,color)| {
                if ui.button(label).fill(color).clicked() {
                    // Handle button clicks here
                    println!("Clicked button: {}", label);
                }
            });
        });
    });
}

Which produced the followinge error:

error[E0599]: no method named `fill` found for struct `Response` in the current scope
  --> egui_stuff/src/main.rs:31:37
   |
31 |                 if ui.button(label).fill(color).clicked() {
   |                                     ^^^^ method not found in `Response`

For more information about this error, try `rustc --explain E0599`.
error: could not compile `egui_stuff` (bin "egui_stuff") due to 1 previous error

Unfortunately, I can't find a description for the button() method used here, nor for the Response method used here in the associated documentation, or I don't know what to look for. Can anyone help me?

[mvlabat]

Hi!

You can construct a button with this API to be able to customise it: https://docs.rs/egui/latest/egui/widgets/struct.Button.html.

For example:

let button = egui::Button::new("Click me").fill(color);
if ui.add(button).clicked() {
  // ...
}

Btw, this is a question about egui itself, not bevy_egui, usually you have a better chance to find a quick answer on their GitHub or Discord server.

[Guelakais]

Thank you for the quick reply. It worked straight away. The code now looks like this:

use bevy::prelude::*;
use bevy_egui::{egui::{RichText,Color32,Button,Window,TopBottomPanel}, EguiContexts, EguiPlugin};
fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin)
        .add_systems(Update, (ui_example_system, header_bar))
        .run();
}

fn ui_example_system(mut contexts: EguiContexts) {
    Window::new("Hello").show(contexts.ctx_mut(), |ui| {
        ui.label("world");
    });
}

fn header_bar(mut contexts: EguiContexts) {
    TopBottomPanel::top("header_bar").show(contexts.ctx_mut(), |ui| {
        // Create an array of button labels for easier management
        ui.horizontal(|ui| {
            [
                ("Button 1", Color32::GREEN,Color32::RED),
                ("Button 2", Color32::BLUE,Color32::GOLD),
                ("Button 3", Color32::RED,Color32::BLUE),
                ("Button 4", Color32::YELLOW,Color32::from_rgb(238,130,238)),
                ("Button 5", Color32::DARK_RED,Color32::DARK_BLUE),
            ]
            .into_iter()
            .for_each(|(label, button_color,label_color)| {
                if ui
                    .add(
                        Button::new(RichText::new(label).color(label_color))
                            .fill(button_color),
                    )
                    .clicked()
                {
                    // Handle button clicks here
                    println!("Clicked button: {}", label);
                }
            });
        });
    });
}

It is not immediately obvious that the problem lies directly with egui if you cannot find the corresponding references in the documentation. egui_bevy could just as well call the Button struct of Bevy directly.

[mvlabat]

There are very few structs, methods that bevy_egui exposes on its own. If you check the EguiContexts documentation, for example, you can see that the Context type it returns already belongs to egui.

All the ui methods, widgets, etc are provided by egui, these don't fall into the bevy_egui zone of responsibility. I understand how it can be a bit confusing, and it's not the first time someone asks questions about egui here. :) So I agree that the documentation can be improved in this regard. In case you have any specific ideas, a comment or a PR are welcome.