componente · @solu30/ui-kit/display
ActionCard
Tarjeta que además es un botón: ícono, título, subtítulo y badge, en cinco colores semánticos.
3 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- carlosmartinpavon
El componente, montado
Cargando el componente del paquete instalado…
Cómo se usa
import { ActionCard } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| icon | sí | ReactNode | — |
| title | sí | string | — |
| subtitle | opcional | string | — |
| badge | opcional | ReactNode | — |
| statusIcon | opcional | ReactNode | — |
| color | opcional | ActionCardColor | — |
| isLoading | opcional | boolean | — |
| disableAnimation | opcional | boolean | — |
| size | opcional | ActionCardSize | — |
| assistantId | opcional | string | — |
| onClick | opcional | () => void | — |
| className | opcional | string | — |
| ariaLabel | opcional | string | — |
Ejemplo del paquete
// Es un <button>: `onClick` es la acción, no un adorno.
<ActionCard icon={<Plus className="size-5" />} title="Nueva reserva"
subtitle="Cargar cliente y fecha" color="primary" onClick={crear} />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.