'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
EmojiPicker
Elige un emoji: busca por nombre en inglés o español, salta por categoría, los recientes primero, y una grilla que recorres con las flechas.
import { EmojiPicker } from '@alea/ui';
Ejemplos
EmojiPicker
Busca en inglés o español ("heart", "corazón"), salta con la fila de categorías, muévete con las flechas y elige con Enter. Lo que eliges aparece primero la próxima vez.
Nothing picked yet
En un popover
El lugar habitual: un botón que dice qué hace abre el selector a su lado, y al elegir se cierra.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-focus…--alea-surface…--alea-surface-hover…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-6…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…--alea-motion-ease-emphasized…
Component
--alea-emoji-cols…
Props
EmojiPicker props
Elige un emoji: busca por nombre (inglés o español), salta por categoría, los recientes primero. La grilla es un listbox en disposición de grilla: las flechas se mueven en dos direcciones, Enter elige, y cada emoji tiene un nombre para lectores de pantalla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
onSelectobligatoria | (emoji: string, name: string) => void | - | Se llama con el emoji elegido y su nombre. |
autoFocusSearch | boolean | true | Pone el cursor en el campo de búsqueda al abrirse. Por defecto true. |
className | string | - | Clases extra. |
columns | number | 8 | Columnas de la grilla. Por defecto 8. |
height | number | 280 | Altura de la grilla con scroll en px. Por defecto 280. |
showRecent | boolean | true | Recuerda lo último elegido (en este navegador) y lo muestra primero. Por defecto true. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Estados
- Hover (CSS)HoverKeyboard focusPressed
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-emoji.alea-emoji-cats.alea-emoji-cat.alea-emoji-scroll.alea-emoji-empty.alea-emoji-grid.alea-emoji-section.alea-emoji-header.alea-emoji-item
Accesibilidad
- La grilla es un listbox en disposición de grilla: las flechas se mueven en dos direcciones, Enter elige.
- Cada emoji tiene un nombre (en el idioma de la página), así los lectores de pantalla dicen "pulgar arriba", no el carácter.
- Los botones de categoría tienen nombre y llevan la grilla a su sección; los resultados de búsqueda reemplazan las secciones.
- Cuando nada coincide, un estado lo indica.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Recorren la grilla |
| Enter | Elige el emoji |
| Tab | Se mueve entre la búsqueda, las categorías y la grilla |
Qué hacer y qué evitar
Hacer
- Ábrelo en un Popover junto a lo que agrega (una reacción, un mensaje, el ícono de una página).
- Deja activados los recientes: la gente reusa los mismos pocos emojis.
Evitar
- No uses emojis como la única forma de decir algo importante.
- No lo abras sin un disparador que diga qué hace ("Agregar reacción").
En Figma
EmojiPicker con la búsqueda, la fila de categorías y una grilla de emojis.