BetaBadge
Marca una función en prueba, como insignia o como aviso descartable.
Usar
import {
BetaBadge,
BetaNotice,
} from "@unozero-ai/ui/react";
<BetaBadge></BetaBadge>Configurador
Cambia las props y mira el componente y su código al mismo tiempo.
<BetaBadge label="BETA" />Junto al título
El sitio natural de BetaBadge: al lado del nombre de la vista o de la función en prueba; en una tarjeta, en su slot header. Va en el violeta de marca, fuera de la familia de estado, para que no se confunda con un aviso. El significado lo cargan la palabra BETA y el matraz, no el color (la Regla del Tenant).
Próxima revisión de precios: hoy a las 18:00.
En la navegación, con tooltip
size="sm" en una fila de menú. pulse cambia el matraz por un punto que late: úsalo los primeros días de una función nueva y quítalo después. tooltip conserva la advertencia de que puede fallar sin ocupar espacio. Con tooltip, la insignia ya entra sola en el orden de tabulación (en el kit React había que pasarle tabIndex), se abre al pasar el ratón o al enfocarla y se cierra con Escape. Pasa el ratón o tabula hasta ella.
Aviso descartable
BetaNotice dice dentro de la propia superficie que la función puede fallar. Sin heading ni description usa los textos del kit, que se cambian con setLabels. Con dismissible aparece «Entendido» (en el kit React lo ponía pasar un manejador): el aviso se pliega, queda hidden y emite uz-dismiss. Recordar que se cerró es cosa tuya; en React, escúchalo con un ref mientras el envoltorio no traiga onDismiss. Cabe en una tarjeta: para un aviso de página completa, un Banner.
Aviso con texto propio
Cuenta qué hace la función y qué debe vigilar quien la usa, no solo que está en prueba. Para un título o un texto con marcado, usa los slots heading y description.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).