'/%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}
Capas
Toggletip e InfoLabel
Un botón pequeño de información que abre un popover al presionarlo, con título, texto y enlaces; tres íconos y dos tamaños. InfoLabel pone uno junto a la etiqueta de un campo.
import { Toggletip, InfoLabel } from '@alea/ui';
Ejemplos
Toggletip e InfoLabel
Un pequeño botón de información que abre un popover al presionarlo, con un título y enlaces. InfoLabel pone uno junto a la etiqueta de un campo.
Usage this month
Legacy export
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-status-warning…--alea-surface-hover…--alea-text…--alea-text-muted…
Type
--alea-font-size-sm…
Props
Toggletip props
Un pequeño botón de información que abre un popover al presionarlo: para explicaciones que la gente quizá quiera leer, con enlaces si hace falta. Escape o un clic afuera lo cierra.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Lo que dice el popover. Puede tener enlaces y botones (a diferencia de un Tooltip). |
aria-label | string | - | El nombre del botón para lectores de pantalla. Por defecto "Más información". |
icon | "warning" | "info" | "help" | 'info' | El ícono: info (por defecto), help o warning. |
placement | "start" | "end" | "bottom" | "top" | 'top' | Dónde se abre. Por defecto top. |
size | "sm" | "md" | 'sm' | sm (ícono de 16 px, por defecto) o md (20 px). |
title | ReactNode | - | Un título arriba del popover. |
InfoLabel props
Una etiqueta con un botón de información al lado, para campos que necesitan una explicación más larga que el texto de ayuda.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El texto de la etiqueta. |
infoobligatoria | ReactNode | - | Lo que explica el botón de información. |
aria-label | string | - | El nombre del botón para lectores de pantalla. Por defecto "Más información". |
className | string | - | Clases extra. |
htmlFor | string | - | El id del campo que etiqueta, para usarla como etiqueta del campo. |
icon | "warning" | "info" | "help" | - | El ícono: info (por defecto), help o warning. |
isRequired | boolean | - | Marca el campo como obligatorio. |
placement | "start" | "end" | "bottom" | "top" | - | Dónde se abre. Por defecto top. |
size | "sm" | "md" | - | sm (ícono de 16 px, por defecto) o md (20 px). |
title | ReactNode | - | Un título arriba del popover. |
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.
Toggletip
- Variantes
iconwarninginfohelpplacementstartendbottomtopsizesmmd- Estados
- HoverPressed
- 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-toggletip-btn.alea-toggletip- Atributos data
data-size=mddata-icon=warning
InfoLabel
- Variantes
iconwarninginfohelpplacementstartendbottomtopsizesmmd- 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-info-label.alea-label-required
Accesibilidad
- Un botón real llamado "Más información" (o tu texto) que abre un diálogo en popover; Escape lo cierra y el foco vuelve al botón.
- A diferencia de un tooltip, se abre al presionarlo y puede tener enlaces, así que funciona en pantallas táctiles y con lectores de pantalla.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Lo abre |
| Escape | Lo cierra |
| Tab | Entra a sus enlaces |
Qué hacer y qué evitar
Hacer
- Úsalo para explicaciones que la gente puede querer, no para algo que necesita para terminar la tarea.
Evitar
- No escondas errores ni pasos obligatorios en un toggletip.