BUTTON
Boton. Color segun tone + variant; contraste garantizado por el tema.
En esta página
Props
Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.
| Prop | Tipo | Requerido | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|---|
| label | texto | No | — | — | Texto del boton. |
| icon | icono (Lucide) | No | — | — | Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico. |
| iconPosition | enum | No | "start""end" | "start" | Lado del icono. |
| tone | enum | No | "neutral""primary""success""warning""danger""info" | — | Intencion. Por defecto primary en solid/link y neutral en soft/outline/ghost. |
| variant | enum | No | "solid""soft""outline""ghost""link" | "solid" | Aspecto. |
| size | enum | No | "xs""sm""md""lg" | "md" | Tamano en escala. |
| fullWidth | booleano | No | truefalse | — | Ocupa todo el ancho. |
| align | enum | No | "start""center" | "center" | Alineacion del contenido si ocupa todo el ancho. |
| loading | booleano | No | truefalse | — | Muestra el indicador de carga y bloquea. |
| disabled | booleano | No | truefalse | — | Deshabilita. |
| submit | booleano | No | truefalse | — | Envia el FORM que lo contiene. |
| showLabel | booleano | No | truefalse | true | false = solo icono (barras compactas). |
| onClick | accion(es)acción | No | — | — | Accion al pulsar. |
| menuOptions | arreglo de objeto | No | — | — | Obsoleto: usa MENU. |
| toolbar | objeto | No | — | — | Como se presenta la accion en las barras. |
Estructuras anidadas
menuOptions[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| menuOptions[].label | texto | — | — | Texto del elemento. |
| menuOptions[].icon | icono (Lucide) | — | — | Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico. |
| menuOptions[].onClick | accion(es)acción | — | — | Accion al elegirlo. |
| menuOptions[].tone | enum | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
| menuOptions[].disabled | booleano | truefalse | — | No seleccionable. |
| menuOptions[].separator | booleano | truefalse | — | Dibuja un separador en lugar de un elemento. |
toolbar
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| toolbar.pinned | booleano | truefalse | — | Anclada en la barra por defecto. |
| toolbar.priority | numero | 0 … 1000 | — | Orden en la barra y el menu (menor primero). |
| toolbar.label | texto | — | — | Nombre corto para el tooltip y el menu (por defecto, el label del boton). |
| toolbar.description | texto | — | — | Descripcion de una linea para el menu de extensiones. |
Props comunes a todos los componentes
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| hidden | booleano | truefalse | — | true oculta el componente (admite expresiones). |
| onLoad | accion(es)acción | — | — | Accion que se ejecuta una vez al montar. |
| onLoadWhen | cualquiera | — | — | Condicion: onLoad se ejecuta cuando pasa a verdadera. |
| ariaLabel | texto | — | — | Nombre accesible explicito. |
Eventos y acciones que acepta
Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.
| Evento | Recibe | Descripción |
|---|---|---|
| onClick | — | Accion al pulsar. |
| menuOptions[].onClick | — | Accion al elegirlo. |
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
loadingAcepta
${state.$loading.<clave>}: CALL_BACKEND/CALL_API mantienen esa marca solos.disabledAdmite una expresión (
${state.x}) para deshabilitar según el estado.context.toolbarButtonModeEn barras de acciones (EMAIL_TOOLBAR, COMPOSER_TOOLBAR...) la app lo fija a
compactomenuy el botón se presenta como icono.toolbarajusta fijado/orden.hidden / onLoadWhenCondiciones comunes:
hidden: "${!state.x}"oculta el componente;onLoadWhenejecutaonLoadal pasar a verdadera.
Simulador interactivo
Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.
Acciones relacionadas
Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.
Usadas en sus ejemplos y manifests
- TOAST
Muestra un aviso breve.
Obligatorios:
message· Campos:messagevarianttone - CALL_BACKEND
Llama a una funcion del server.js. Pone
state.$loading[key]/state.$error[key]solos, admite reintento y guarda el resultado conresultKey.Obligatorios:
function· Campos:functionargsparamskeyresultKeyretrytoastOnErroronSuccess - OAUTH_CONNECT
Inicia la conexion OAuth de un proveedor.
Obligatorios:
provider· Campos:providerurl
Acciones que lo controlan
- SET_LOADING
Marca una clave como cargando (
state.$loading).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Tomado de bloomx-extensions/google-drive/manifest.json (core-google-drive), en mounts[1].component.props.children[0].props.true[0].props.children[1] (punto OVERLAY).
También se usa en: airtable-records/manifest.json, appointments/manifest.json, asana-tasks/manifest.json, calendar/manifest.json, calendly/manifest.json, composer-helper/manifest.json.
{
"type": "BUTTON",
"props": {
"label": "Connect Google",
"onClick": {
"action": "OAUTH_CONNECT",
"provider": "google"
}
}
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "OVERLAY",
"component": {
"type": "BUTTON",
"props": {
"label": "Connect Google",
"onClick": {
"action": "OAUTH_CONNECT",
"provider": "google"
}
}
}
}
]
}