'/%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
Ribbon e Indicator
Una etiqueta en la esquina de una tarjeta, y un punto o número en la esquina de un avatar o ícono.
import { Ribbon, Indicator } from '@alea/ui';
Ejemplos
Cintas e indicadores
Etiquetas en la esquina de tarjetas, y puntos de estado o contadores en avatares e íconos.
Alea Pro
All 13 plugins
Yearly
Two months free
Online12 unread notifications
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-accent-on…--alea-accent-solid…--alea-chip-bg…--alea-chip-text…--alea-status-danger-on-solid…--alea-status-danger-solid…--alea-status-success-on-solid…--alea-status-success-solid…--alea-status-warning-on-solid…--alea-status-warning-solid…
Type
--alea-font-family-body…--alea-font-size-xs…--alea-font-weight-semibold…
Component
--alea-r…
Props
Ribbon props
Una etiqueta que envuelve la esquina de una tarjeta.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
textobligatoria | ReactNode | - | El texto de la cinta: Nuevo, Popular, -20%. |
className | string | - | Clases extra para el elemento raíz. |
placement | "start" | "end" | 'end' | Esquina start o end (por defecto). |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | 'accent' | Significado del color: accent, success, warning, danger o neutral. |
Indicator props
Un punto o número en la esquina de un avatar, ícono o botón: estado, cantidad sin leer.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | string | - | Qué significa, para lectores de pantalla ("3 mensajes sin leer", "En línea"). |
className | string | - | Clases extra para el elemento raíz. |
count | number | - | Un número, o nada para un punto. |
isHidden | boolean | - | Lo oculta (mantiene el hijo). |
max | number | 99 | Muestra max+ por encima de esto. Por defecto 99. |
position | "bottom-end" | "top-end" | "top-start" | "bottom-start" | 'top-end' | Qué esquina. Por defecto arriba al final. |
processing | boolean | - | Late para llamar la atención. Respeta el movimiento reducido. |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | 'danger' | Significado del color: accent, success, warning, danger o neutral. |
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.
Ribbon
- Variantes
placementstartendtonedangerneutralaccentsuccesswarning- 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-ribbon-wrap.alea-ribbon- Atributos data
data-placement=enddata-placement=startdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=neutral
Indicator
- Variantes
positionbottom-endtop-endtop-startbottom-starttonedangerneutralaccentsuccesswarning- 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-indicator-wrap.alea-indicator- Atributos data
data-dotdata-position=top-enddata-position=top-startdata-position=bottom-enddata-position=bottom-startdata-tone=successdata-tone=warningdata-tone=accentdata-tone=neutraldata-processing
Accesibilidad
- El indicador tiene una etiqueta de texto para lectores de pantalla ("3 sin leer", "En línea"); el número en sí queda oculto para ellos.
Qué hacer y qué evitar
Hacer
- Usa como máximo una cinta por tarjeta.
- Limítala a una palabra o un número corto (-20%).
Evitar
- No dependas solo del color de la cinta.
- No pongas acciones en ella.