'/%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}
Datos
Amount
Dinero con su dirección: +$8,400.00 en verde para lo que entra, −$842.17 para lo que sale, con el formato del idioma y la moneda de quien lee.
import { Amount } from '@alea/ui';
Ejemplos
Entra y sale
Positivo es dinero que entra (verde, con un más), negativo dinero que sale. icon agrega la flecha.
En una tabla
Alineados al final con números tabulares, así los dígitos quedan alineados.
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-success…--alea-surface-raised…--alea-text-muted…
Space
--alea-space-2…
Props
Amount props
Dinero con su dirección: +$8,400.00 en verde para lo que entra, −$842.17 para lo que sale, en el idioma de cada persona.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
valueobligatoria | number | - | El monto: positivo es dinero que entra, negativo dinero que sale. |
className | string | - | Clases extra para el elemento raíz. |
colorIn | boolean | true | Pinta de verde el dinero que entra. Por defecto true. |
currency | string | 'USD' | Código de moneda ISO. Por defecto USD. |
formatOptions | NumberFormatOptions | - | Opciones de formato numérico (se combinan con la moneda). |
icon | boolean | - | Muestra la flecha de entrada o salida antes. Por defecto false. |
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.
- 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-amount.alea-amount-icon.alea-amount-value- Atributos data
data-colordata-dir=in
Accesibilidad
- El signo es parte del texto, así que la dirección nunca depende del color.
- La flecha es decorativa.
Qué hacer y qué evitar
Hacer
- Alinea los montos al final en las tablas.
- Pasa la moneda ISO de la cuenta.
Evitar
- No pintes de rojo el dinero que sale: la mayoría de las filas son pagos, y el rojo significa un problema.
En Figma
Amount con Direction (in, out) e Icon.