Banner

Banner forma parte del apartado «Feedback» del kit. Alertas, toasts, diálogos y tooltips para comunicar estados y confirmar acciones.

Instalación#

bash

pnpm add @tsukira/ui

tsx

import { Banner } from "@tsukira/ui"; export function Ejemplo() {  return <Banner />;}

Los ejemplos detallados de Banner están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

BannerPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>

Prop	Tipo	Default	Descripción
`tone`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'brand'`	—	Tono semántico.
`variant`	`'subtle' \| 'solid'`	—	Variante visual. `subtle` (default) = fondo soft. `solid` = fondo lleno.
`icon`	`ReactNode`	—	Icono al inicio (típicamente un símbolo del tono).
`title`	`ReactNode`	—	Título — primera línea, bold.
`description`	`ReactNode`	—	Descripción — segunda línea, fuente normal.
`action`	`ReactNode`	—	Acción a la derecha (e.g., `<Button>`). En mobile se apila debajo.
`onDismiss`	`(() => void)`	—	Si se pasa, renderea botón de cerrar (X) que llama esta función.
`onRemove`	`(() => void)`	—	Alias deprecado de onDismiss para consistencia con Chip.
`dismissLabel`	`string`	`'Cerrar'`	aria-label del botón dismiss. Default: `'Cerrar'`.