Text
A text element with typography presets (h1–h6, paragraph, quote). The workhorse for labels, headings and value readouts.
Reach for it when you need:
- Labels and headings
- A numeric readout bound to a tag
Component name: Text · Category: Display
In the palette: Text element with typography presets (h1–h6, paragraph, quote…)
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
content | string | Text | — |
variant | enum | p | Typography preset. Sets the semantic tag and base type styling. Options: p · h1 · h2 · h3 · h4 · h5 · h6 · lead · large · small · muted · blockquote · code. |
textStyle | textStyle | {} | Typography styles (font, size, weight, alignment, spacing, decoration…) |
width | string | 100% | — |
height | string | auto | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
Right-click behaves differently in the Designer
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Set the number format on the tag, not here — then every screen showing that tag formats it identically.