Skip to main content
ButtonWidget provides clickable UI elements with hover effects, custom styling, auto-sizing, and event handling through signals.

Basic Usage

#include <fern/fern.hpp>

using namespace Fern;

auto button = Button(ButtonConfig(100, 50, 120, 40, "Click Me"));
button->onClick.connect([]() {
    std::cout << "Button clicked!" << std::endl;
});

Constructor

config
ButtonConfig
Configuration object containing position, size, label, and style

ButtonConfig

Configure button properties with a fluent interface:
ButtonConfig(int x, int y, int width, int height, const std::string& label)

Configuration Methods

ButtonConfig& style(const ButtonStyle& s)       // Set button style
ButtonConfig& label(const std::string& text)    // Set label text
ButtonConfig& position(int x, int y)            // Set position
ButtonConfig& size(int width, int height)       // Set size

ButtonStyle

Customize button appearance:

Color Methods

ButtonStyle& normalColor(uint32_t color)      // Default button color
ButtonStyle& hoverColor(uint32_t color)       // Color when hovering
ButtonStyle& pressColor(uint32_t color)       // Color when pressed
ButtonStyle& textColor(uint32_t color)        // Text color

Styling Methods

ButtonStyle& textScale(int scale)             // Text size (1-5)
ButtonStyle& borderRadius(int radius)         // Corner roundness
ButtonStyle& border(int width, uint32_t color) // Border width and color

Signals

Buttons emit signals for user interaction:
onClick
Signal<>
Emitted when the button is clicked
onHover
Signal<bool>
Emitted when hover state changes (true = hovering, false = not hovering)
onPress
Signal<bool>
Emitted when press state changes (true = pressed, false = released)

Methods

Configuration

void setConfig(const ButtonConfig& config)
const ButtonConfig& getConfig() const

void setLabel(const std::string& label)

Auto-Sizing

void autoSizeToContent(int padding = 16)
static int calculateTextWidth(const std::string& text, int textScale)
static int calculateTextHeight(int textScale)

Examples

Basic Button

auto button = Button(ButtonConfig(100, 50, 120, 40, "Click Me"));
button->onClick.connect([]() {
    std::cout << "Clicked!" << std::endl;
});

Custom Styled Button

ButtonConfig config(100, 50, 120, 40, "Submit");
config.style(ButtonStyle()
    .normalColor(Colors::Green)
    .hoverColor(Colors::LightGreen)
    .pressColor(Colors::DarkGreen)
    .textColor(Colors::White)
    .borderRadius(8));

auto button = Button(config);

Button with Border

ButtonStyle style;
style.normalColor(Colors::White)
     .textColor(Colors::Blue)
     .border(2, Colors::Blue)
     .borderRadius(4);

auto button = Button(ButtonConfig(100, 50, 120, 40, "Outlined")
    .style(style));

Button with All Events

auto button = Button(ButtonConfig(100, 50, 120, 40, "Interactive"));

button->onClick.connect([]() {
    std::cout << "Button clicked!" << std::endl;
});

button->onHover.connect([](bool isHovered) {
    if (isHovered) {
        std::cout << "Mouse entered" << std::endl;
    } else {
        std::cout << "Mouse left" << std::endl;
    }
});

button->onPress.connect([](bool isPressed) {
    if (isPressed) {
        std::cout << "Button pressed" << std::endl;
    } else {
        std::cout << "Button released" << std::endl;
    }
});

Button Presets

The ButtonPresets namespace provides common button styles:
// Primary button (blue)
auto primary = Button(ButtonPresets::Primary(10, 10, 100, 35, "Save"));

// Secondary button (gray)
auto secondary = Button(ButtonPresets::Secondary(120, 10, 100, 35, "Cancel"));

// Success button (green)
auto success = Button(ButtonPresets::Success(10, 50, 100, 35, "Confirm"));

// Danger button (red)
auto danger = Button(ButtonPresets::Danger(120, 50, 100, 35, "Delete"));

// Warning button (orange)
auto warning = Button(ButtonPresets::Warning(10, 90, 100, 35, "Warning"));

// Info button (light blue)
auto info = Button(ButtonPresets::Info(120, 90, 100, 35, "Info"));

// Light button (light gray)
auto light = Button(ButtonPresets::Light(10, 130, 100, 35, "Light"));

// Dark button (dark gray)
auto dark = Button(ButtonPresets::Dark(120, 130, 100, 35, "Dark"));

Complete Example

From examples/cpp/new/06_button_styles.cpp:
#include <fern/fern.hpp>

using namespace Fern;

void setupUI() {
    auto primaryBtn = Button(ButtonPresets::Primary(0, 0, 120, 40, "Primary"));
    auto successBtn = Button(ButtonPresets::Success(0, 0, 120, 40, "Success"));
    auto dangerBtn = Button(ButtonPresets::Danger(0, 0, 120, 40, "Danger"));
    auto warningBtn = Button(ButtonPresets::Warning(0, 0, 120, 40, "Warning"));
    
    primaryBtn->onClick.connect([]() {
        std::cout << "Primary button clicked!" << std::endl;
    });
    
    addWidget(
        Center(
            Column({
                primaryBtn,
                SizedBox(0, 10),
                successBtn,
                SizedBox(0, 10),
                dangerBtn,
                SizedBox(0, 10),
                warningBtn
            })
        )
    );
}

See Also

Build docs developers (and LLMs) love