Resumen
Renderiza un personaje de asistente a partir de una forma de cuerpo, cara, color de paleta y tamaño. El componente muestra los valores proporcionados; tu aplicación gestiona la selección y la persistencia.”Uso”
Opciones visuales
Elige formas independientemente de las expresiones y los colores.
El cuerpo y la cara usan los tokens de tema de la paleta seleccionada y siguen el tema claro u oscuro circundante. Establece
size para un personaje cuadrado. Los atributos nativos, los eventos, className, style y ref se aplican al span exterior; los estilos explícitos anulan sus dimensiones y los valores predeterminados de la paleta.
Accesibilidad
El personaje es decorativo cuando no tiene un nombre accesible, como en el ejemplo de uso etiquetado. Para un personaje independiente, proporcionaaria-label o aria-labelledby; la raíz expone entonces el rol de imagen. El cuerpo y la cara permanecen ocultos para la tecnología de asistencia para que el personaje se anuncie una sola vez.
Establece aria-hidden explícitamente cuando necesites anular el valor predeterminado basado en el nombre, por ejemplo, para ocultar un personaje con nombre junto a texto visible equivalente.
Coloca el personaje dentro de un botón o enlace con nombre cuando acompañe una acción. La aplicación gestiona el control, su etiqueta y su comportamiento.
”Props”
Explicitly hides or exposes the character. Takes precedence over the name-based default.
string
Accessible name for a standalone character. Adds the image role; omit it beside a visible name.
string
ID of an element naming a standalone character. Adds the image role.
string
CSS class applied to the span root.
"blue" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "sky" | "turquoise" | "yellow"
predeterminado:"blue"
Theme palette used for the body and face. Follows the surrounding light or dark theme.
"default" | "happy" | "love" | "sleepy" | "surprised" | "wink"
predeterminado:"default"
Expression displayed over the body.
boolean
predeterminado:"false"
Plays the selected expression’s idle loop. Displays the static expression when the browser prefers reduced motion.
"arch" | "burst" | "circle" | "cloud" | "clover" | "cookie" | "flower" | "gem" | "hexagon" | "pill"
predeterminado:"circle"
Body shape of the assistant character.
14 | 16 | 20 | 24 | 40
predeterminado:"24"
Width and height in pixels: 14, 16, 20, 24, or 40.
CSSProperties
Inline styles applied to the root. Explicit styles override its dimensions and palette defaults.