Hex doc
Phoenix
Semantic
Use class="ui-{role}" to set the semantic palette of an avatar.
Available options: accent, alert, brand, info, success
DF
AC
BR
AL
IN
SU
Variant
Variant modifiers control avatar surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add
ui-solid
for a filled surface.
Su
So
Semantic × variant
Combine semantic palette and variant treatment on the same host, for example avatar ui-accent ui-solid.
BS
BS
AC
AC
AL
AL
BR
BR
IN
IN
SU
SU
Size
Use class="ui-size-{size}" to set the size of an avatar.
Available options: xs, sm, md (default), lg, xl
Sm
Md
Lg
Xl
Rounded
Use class="ui-rounded-{step}" to set the corner radius of an avatar.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
No
Sm
Md
Lg
Xl
Fl