Component Heading

Heading

Semantic headings (H1/H2/H3).

Headings are styled text for section titles. For body text, use Label or Text.

When to use

• Page titles, section headings, grouped UI labels
• Dialog titles (often via Modal.title(...))

Not a good fit:

• Long body text (use Label)

Example

use yororen_ui::component::{heading, HeadingLevel};

let title = heading("Settings").level(HeadingLevel::H1);
let section = heading("General").level(HeadingLevel::H2);

API

• heading("..."): constructor
• id(...): stable identity
• level(HeadingLevel):
  • H1: 32px bold
  • H2: 24px semibold (default)
  • H3: 18px semibold

Defaults

• Default level: H2
• Color: theme.content.primary

Tips

• Keep headings short; long paragraphs should use Label.
• For consistent spacing between sections, put headings in your layout with explicit margins/padding.

Notes

• Heading colors use theme.content.primary.