Basic Components in Freya

In this tutorial, I’ll explore Freya’s built-in components and learn how to compose them into user interfaces.

Components Overview

Freya provides several built-in components:

• label - Display text
• rect - Container for layout and styling
• Button - Clickable interactive elements

Using Labels

Labels are the simplest way to display text:

use freya::prelude::*;

fn app() -> impl IntoElement {
    label()
        .font_size(18.0)
        .color(Color::WHITE)
        .child("Hello, World!")
}

Working with Rects

Rects are containers that help with layout:

fn app() -> impl IntoElement {
    rect()
        .width(Size::fill())
        .height(100.0)
        .background(Color::from_rgb(50, 50, 50))
        .padding(20.0)
        .child(label().text("Content inside a rect"))
}

Creating Buttons

Buttons are interactive elements:

fn app() -> impl IntoElement {
    Button::new()
        .on_press(|_| println!("Clicked!"))
        .child(label().text("Click me"))
}

Nesting Components

Components can be nested to create complex layouts:

fn app() -> impl IntoElement {
    rect()
        .width(400.0)
        .height(300.0)
        .direction(Direction::Vertical)
        .child(
            label()
                .font_size(24.0)
                .child("Title")
        )
        .child(
            label().text("Description text goes here...")
        )
        .child(
            Button::new()
                .margin(Margin::new(10.0, 0.0, 0.0, 0.0))
                .child(label().text("Action"))
        )
}

What’s Next

In the next tutorial, I’ll dive deep into Freya’s layout system and learn about spacing, alignment, and responsive design.

Summary

• Labels display text with customizable styling
• Rects are containers for layout and styling
• Buttons provide interactivity with onclick handlers
• Components nest naturally to build complex UIs