ICON_BUTTON
Boton solo con icono; label es obligatorio (nombre accesible y tooltip).
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 |
|---|---|---|---|---|---|
| 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. |
| label | texto | Sí | — | — | Nombre accesible. |
| tone | enum | No | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
| variant | enum | No | "solid""soft""outline""ghost""link" | "ghost" | Aspecto. |
| size | enum | No | "xs""sm""md""lg" | "md" | Tamano en escala. |
| loading | booleano | No | truefalse | — | Cargando. |
| disabled | booleano | No | truefalse | — | Deshabilita. |
| onClick | accion(es)acción | No | — | — | Accion al pulsar. |
| toolbar | objeto | No | — | — | Como se presenta la accion en las barras. |
Estructuras anidadas
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. |
| 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
- COPY_TO_CLIPBOARD
Copia texto.
Obligatorios:
text· Campos:textsuccessMessage
Acciones que lo controlan
- SET_LOADING
Marca una clave como cargando (
state.$loading).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Ningún manifest de bloomx-extensions usa todavía este componente. Este es el ejemplo del esquema (ui-examples.ts) dentro de un manifest mínimo.
{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "EMAIL_TOOLBAR",
"component": {
"type": "ROW",
"props": {
"gap": 1
},
"children": [
{
"type": "ICON_BUTTON",
"props": {
"icon": "Copy",
"label": "Copiar asunto",
"onClick": {
"action": "COPY_TO_CLIPBOARD",
"text": "${context.subject}",
"successMessage": "Asunto copiado"
}
}
},
{
"type": "ICON_BUTTON",
"props": {
"icon": "Trash2",
"label": "Eliminar",
"tone": "danger",
"variant": "soft"
}
}
]
}
}
]
}