MetricCard

Tarjeta con una cifra clave, su tendencia y el periodo de comparación.

Cuándo usarlo

Props. label, value, change, trend (up · down), period, menu. Valor en Bricolage Grotesque 36/44 semibold; tendencia en text-success-primary / text-error-primary siempre con flecha, nunca solo color.

Detalles. Funciona sin JavaScript. La tendencia lleva su flecha y, para lectores de pantalla, "Sube" o "Baja" delante de la cifra.

Ampliaciones sobre la guía. En la guía el botón de tres puntos no hacía nada: aquí onMenu recibe el clic y menuLabel cambia su nombre ("Más opciones"). menu también admite un nodo, como un Dropdown con su propio trigger.

Ejemplos

Gasto del mes

1.284 €

12%vs. septiembre

Ahorro

420 €

8%vs. septiembre

Props

Prop	Tipo	Por defecto	Descripción
`label`obligatoria	`ReactNode`	—
`value`obligatoria	`ReactNode`	—	La cifra, en Bricolage Grotesque 36/44 semibold.
`change`	`ReactNode`	—	Cambio frente al periodo anterior, como "12%".
`trend`	`"up" · "down"`	`up`	Sube (`text-success-primary`, flecha arriba) o baja (`text-error-primary`, flecha abajo): siempre con flecha, nunca solo color.
`period`	`ReactNode`	—	Periodo de comparación, como "vs. septiembre".
`menu`	`ReactNode`	—	Menú de la tarjeta: `true` pinta el botón de tres puntos (con `onMenu`); también admite un nodo, como un `Dropdown` con `trigger` (ampliación sobre la guía).
`onMenu`	`(() => void)`	—	Al pulsar el botón de tres puntos (ampliación sobre la guía).
`menuLabel`	`string`	`"Más opciones"`	Nombre del botón de tres puntos.
`className`	`string`	—

Código

import { MetricCard } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<MetricCard
				label="Gasto del mes"
				value="1.284 €"
				change="12%"
				trend="down"
				period="vs. septiembre"
			/>
		</>
	);
}

---
import { MetricCard } from "@jotis-me/react";
---

<MetricCard
	label="Gasto del mes"
	value="1.284 €"
	change="12%"
	trend="down"
	period="vs. septiembre"
/>

Con onMenu necesita una función: envuélvelo en un .tsx y úsalo como isla client:load.