Text

Live Demo

Open the demo in a separate tab.

Use text("...") as the canonical way to create ordinary text in a Beverly application:

#![allow(unused)]
fn main() {
ui().children([text("Hello, Beverly!")])
}

The helper returns Bevy’s Text component. Beverly’s typography systems then apply the embedded default font and synchronize its size, color, shaping, and layout. Use ThemedText when the text needs a semantic role such as a heading, caption, or muted label. Add ordinary text to an application with ui().children([...]); the root Ui composition owns the application tree. Every composable Beverly element follows the same .children([...]) convention.

Text carries the supporting content around a title: explanations, labels, metadata, helper copy, and status details. It is the flexible, lower-emphasis counterpart to the title primitive and should inherit the active theme’s typography rules.

When to use

Use themed text when content belongs inside an existing hierarchy rather than naming the hierarchy itself. Common uses include:

• descriptions below a title
• labels attached to controls
• captions and timestamps
• helper and validation messages
• muted metadata or status details

Use ThemedTitle when the text introduces a meaningful screen, panel, card, or section.

Text roles

TextRole gives common content a semantic size and color:

• Heading - title-sized supporting heading
• Body - ordinary readable copy
• Label - compact text for controls and field labels
• Caption - small muted supporting information
• Muted - body-sized secondary copy
• Accent - compact text using the theme’s primary color
• Disabled - text for unavailable controls or content

The active theme resolves the exact size and color for each role. Prefer a role change over a manual override so the text remains coherent across themes.

Example

#![allow(unused)]
fn main() {
use bevy::prelude::*;
use beverly::prelude::*;

fn my_ui() -> Ui {
	ui().children([text("Last synced 2 minutes ago")])
}
}

Overrides

When a single piece of text genuinely needs a different treatment, use .size(...) or .color(...) on ThemedText. These overrides are local decisions and should not replace the shared role system:

#![allow(unused)]
fn main() {
app()
	.children([text("Sync failed")])
	.run();
}

Manual colors bypass the theme’s default contrast choices, so verify them in every theme where the text appears. Font family is controlled through the Typography component or the application’s global typography setup.

Guidance

• use the smallest role that preserves comfortable reading
• keep labels and metadata concise
• use muted roles for secondary information, not essential instructions
• let the surrounding layout control text spacing and alignment
• allow body text to wrap rather than clipping or forcing a fixed height