Text nativelite

A run of text in one of the type styles; prefer dedicated components over inline markdown.

A2UI basic: Text
Children: none

Preview

Loading the renderer…

textrequired

variant

align

lines

tone

live

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Text",
          "text": "Hello, world!",
          "variant": "body"
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Text rendered by the React renderer on Web — **Web** React

Text rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Text rendered by the Compose renderer on Android — **Android** Compose

Text rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-text, painted by each native renderer.

Variants

variant · body

variant · caption

variant · muted

variant · lead

variant · code

variant · label

variant · title

tone · neutral

tone · primary

tone · success

tone · warning

tone · danger

tone · info

Props

Prop	Type	Default	Description
`text`requiredbind	`string`	–	The text to show.
`variant`	`body \| caption \| muted \| lead \| code \| label \| title`	`"body"`	The type style.
`align`	`start \| center \| end`	–	Horizontal alignment inside its box.
`lines`	`number`	–	Truncates to this many lines with an ellipsis.
`tone`	`neutral \| primary \| success \| warning \| danger \| info`	–	A colour tone instead of the default foreground.
`live`	`off \| polite \| assertive`	`"off"`	Announces text changes to screen readers (`assertive` interrupts).
`style`	`style`	–	Extra Box styles for the text box.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: text
Semantics: text (a live region when live is not off)

Not focusable; no keys.

Theming

Recipe parts: Text/root
Keyed by: varianttone:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme