Text
Text. type gives it meaning (h1–h6, p, label, code) for accessibility and SEO.
Also written Txt; layr format rewrites these to Text.
A type scale
Text shows text. size is in design pixels, weight and lineHeight shape it, and type says what it is (h1–h6, p, label, code…) for screen readers and search engines, without changing how it looks.
Column(
.config(w: 320, gap: 8)
Text(
.config(size: 32, letterSpacing: -0.6, type: h1, weight: semibold)
.obj('Room B')
)
Text(
.config(size: 17, color: muted, lineHeight: 1.5)
.obj(
'A quiet studio for mixing, podcasts and rehearsals, booked by the hour.'
)
)
Text(
.config(
size: 12
color: accent
letterSpacing: 0.6
transform: upper
weight: medium
)
.obj('Available today')
)
)Long text that must fit
maxLines with overflow: ellipsis cuts text off with … after that many lines, the same on every screen.
Container(
.config(w: 260, color: panel, cornerRadius: 12, padding: all(14))
.obj(
Text(
.config(lineHeight: 1.4, maxLines: 2, overflow: ellipsis)
.obj(
'A studio booking page that shows the week, the free times and what is coming up, written once and laid out on every screen.'
)
)
)
)Config keys
| Key | Type | Default | Meaning |
|---|---|---|---|
size (fontSize) | len | Font size in design px. | |
font (fontFamily) | txt | Font family, e.g. 'Geist'. | |
weight (fontWeight, wight) | thin | light | regular | medium | semibold | bold | black | Font weight: thin…black or 100–900. | |
italic (italics) | bool | Italic style. | |
color | paint | Text colour (a gradient paints the glyphs). | |
align (textAlign, textAlight, alignment) | left | mid | right | start | end | justify | Text alignment. | |
lineHeight | num | Line height as a multiple of the font size. | |
letterSpacing | len | Space between letters. | |
type | h1 | h2 | h3 | h4 | h5 | h6 | p | label | code | span | strong | em | p | Semantic type (sets the element and default style): h1–h6, p, label, code, span. |
underline | bool | Underline. | |
underlinePos | auto | under | baseline | Underline position. | |
underlineSkipInk | bool | true | Skip descenders when underlining. |
strike | bool | Strike-through. | |
transform | none | upper | lower | capitalize | Case transform. | |
overflow | wrap | ellipsis | fade | scale | clip | wrap | Long text: wrap (default), ellipsis, fade, scale or clip. |
maxLines | int | Maximum lines before overflow applies. | |
selectable | bool | true | Allow selection. |
baseline (textBaseline) | top | mid | bottom | baseline | Vertical alignment inside a line. | |
w (width) | len | fill | hug | Width: a length, fill (share the remaining space) or hug (fit content, default). | |
h (height) | len | fill | hug | Height: a length, fill or hug (default). | |
minW (minWidth) | len | Minimum width. | |
maxW (maxWidth) | len | Maximum width. | |
minH (minHeight) | len | Minimum height. | |
maxH (maxHeight) | len | Maximum height. | |
aspect (aspectRatio) | num | Aspect ratio (width / height), e.g. 16/9. | |
margin | insets | Space outside the object: all(8), sym(x: 8, y: 4), only(top: 8). | |
opacity | num | Opacity from 0 to 1. | |
hide (hidden) | bool | Removes the object from layout and the accessibility tree. | |
shrink | num | 1 | Shrink priority when space runs out. Lower shrinks first; 0 never shrinks. |
flex | num | 1 | Share of remaining space for fill sizes. |
cursor | auto | pointer | text | grab | grabbing | move | notAllowed | crosshair | none | Pointer cursor. | |
className (class) | txt | Extra CSS class names: styling hooks for your own stylesheet (hover rules, third-party CSS). |
Slots
.obj: text, the default slot, required
Events
.on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.