Skip to content
Elements / Content

avatar

A person's initials in a circle, with their name and an optional detail line beside it.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground
Tweak the props
size
tone
name

Props

"text"textThe person's name. The initials come from it.required
detailstringA second line under the name, like a role.—
sizesm · md · lgsm, md or lg.md
toneaccent · good · warn · bad · mutedCircle color role: accent, good, warn, bad or muted.accent
namebooleanShow the name beside the circle (default true).true
ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—
tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

SayShape v0.1 is an early prototype under the MIT License. Status · GitHub