Avatar Customizer Account Block for React

From the theme: the foreground, a few mixes of the foreground into the background, the muted fill, the muted text colour and the plain background. They are written as literal classes in TONES, each with the text colour that passes contrast on it, so they follow the light and dark theme and every preset. A swatch is a native radio with its name under it and a tick when chosen, so colour is never the only signal.

One or two letters, in any alphabet, shown in capitals. Anything else is dropped as you type and the line under the field says "Letters only, one or two." An empty field is refused on Save with its reason, and focus goes back to the field.

The same avatar three times (64, 40 and 24 pixels) and once inside a chip like the one in an app's header, drawn with the draft, so a change is visible at every size at once. The ring is a gap in the stage's own colour and then a line in the text colour, so it reads on any tone.

Saving keeps the draft in this page only and says "Saved in this demo." in the foot; nothing is stored and a reload starts again. To make it real, send the initials, shape, tone and ring from save to your endpoint, keep the draft until it answers and show a failure in the status line. Render the avatar the same way wherever your app shows a member.

No. A theme editor changes the colours of a whole workspace; this changes one member's avatar and nothing else on the page. The neutral tones are deliberate: they never compete with the page's one coloured button.

The controls are named (Initials, Shape, Tone, A ring around the avatar), the shape buttons and tone swatches work with the arrow keys and show a visible focus ring, the preview is drawn and its description is real text, and the foot is a polite live region. On a phone the preview comes first, then the controls, and the foot with Save stays pinned to the bottom of the screen.