Learn Rust Coding · Lesson

Widgets and Layout

Build buttons, inputs, and panels.

The Widget Palette

egui ships a rich set of built-in widgets: labels, headings, buttons, checkboxes, radio buttons, sliders, drag values, text edits, combo boxes, and more.

Each is a method on Ui and returns a Response. You compose UIs by calling them in sequence rather than instantiating classes.

ui.heading("Settings");
ui.checkbox(&mut self.dark, "Dark mode");
ui.add(egui::Slider::new(&mut self.volume, 0.0..=1.0).text("Volume"));
ui.text_edit_singleline(&mut self.name);

ui.add and the Widget Trait

Convenience methods like ui.button wrap richer widget structs. For configurable widgets you build the struct and pass it to ui.add.

Anything implementing the Widget trait works with ui.add, including your own custom widgets. This is the extensible core of egui's API.

let slider = egui::Slider::new(&mut self.zoom, 0.5..=4.0)
    .logarithmic(true)
    .suffix("x");
let resp = ui.add(slider);
if resp.changed() { self.rerender(); }

All lessons in this course

← Back to Learn Rust Coding