TypingIndicator

A line that says who is typing.

SourcePackage @weft-js/warp

Preview

tsx

import { Stack, TypingIndicator } from '@weft-js/warp'export function Names() {  return (    <Stack gap="related">      <TypingIndicator text="Sam is typing…" />      <TypingIndicator text="Sam and Jun are typing…" />    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { TypingIndicator } from '@weft-js/warp'<Stack gap="related">  <TypingIndicator text="Sam is typing…" />  <TypingIndicator text="Sam and Jun are typing…" /></Stack>

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`text`	`string`	—	The whole sentence, in your words.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="typing"] [data-part="dots"]

dots

RelatedThread Composer