Botón

Muestra un botón con el estilo del tema. Toma los colores del tema actual, puede llevar un icono y un atajo de teclado, y tiene varias variantes y tamaños. Cualquier parámetro de estilo de pz.button (bg, hover_bg, color, shadow, radius…) reemplaza al del tema.

ui.button · Categoría: Acciones · Referencia completa →

Vista previa
Código

pz.row([
    ui.button("Cancel", on_cancel, variant="ghost"),
    ui.button("Save", on_save, icon="save", variant="solid", keys="ctrl-s"),
], spacing=8)

Estados al pasar el puntero y al pulsar, con un puntero real.

Cuándo usarlo

Para las acciones principales de un formulario, diálogo o barra.
Usa variant="solid" para la acción principal y "ghost" para las secundarias.
Para un botón con solo un icono, usa Botón de icono.

Uso

import pyzed as pz
from pyzed import ui

class Editor(pz.App):
    def save(self):
        ...

    def view(self):
        return ui.button("Save", self.save, icon="save", keys="ctrl-s")

Variantes

Variante

filled es la de por defecto; usa solid para la única acción principal de una pantalla.

Botón: variant="filled" — `variant="filled"`

Botón: variant="ghost" — `variant="ghost"`

Botón: variant="subtle" — `variant="subtle"`

Botón: variant="outline" — `variant="outline"`

Botón: variant="solid" — `variant="solid"`

Botón: variant="tinted" — `variant="tinted"`

Colores semánticos

Un nombre de color como variant da un botón teñido; tint= colorea uno solid.

Botón: variant="accent" — `variant="accent"`

Botón: variant="success" — `variant="success"`

Botón: variant="warning" — `variant="warning"`

Botón: variant="error" — `variant="error"`

Botón: variant="info" — `variant="info"`

Botón: variant="solid", tint="error" — `variant="solid", tint="error"`

Tamaño

size="xs"

Código

ui.button("Extra small", on_press, size="xs")

size="sm"

Código

ui.button("Small", on_press, size="sm")

Contenido

Botón: icon_position="end" — `icon_position="end"`

Botón: icon_color="success" — `icon_color="success"`

Estado

Un botón sin on_press se dibuja deshabilitado, así las acciones sin terminar lo parecen.

Botón: full_width=True — `full_width=True`

Estilo propio

Los argumentos de estilo de pz.button (bg, hover_bg, pressed_bg, color, border_color, shadow, radius, padding) reemplazan los valores del tema solo en ese botón.

Estados y eventos

El widget pz.* de debajo: sin tema, todos los colores y tamaños son tuyos.

Botón: Cualquier contenido — Cualquier contenido

Ejemplos

Ancho completo

full_width=True estira el botón hasta el ancho de su contenedor.

Vista previa
Código

pz.column([
    ui.button("Sign in", on_press, variant="solid", full_width=True),
    ui.button("Create an account", on_press, variant="outline", full_width=True),
], spacing=8, width=320)

Eventos

Botón tiene 1 evento propios, en la tabla de abajo. Como todo widget, también tiene los 18 eventos comunes (click, double_click, right_click, mouse_enter, drag, key_down, resize…), que se conectan con .on(...): mira Eventos y Eventos de cada componente.

Evento	De	El handler recibe	Cuándo
`on_press`	`ui.button`, `pz.button`	`()`	Mensaje o callable que se envía al pulsar. `None` deshabilita el control.

El handler recibe es lo que Pyzed le pasa a tu función: () es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a update().

Manejar los eventos

Los mismos eventos escritos de tres formas. Imperativa: métodos de la app que cambian self. Declarativa: los handlers producen mensajes y un único update() decide. Funcional: una función pura dibuja un estado inmutable y pide cambios con set_state(...). Mira Imperativo, declarativo y funcional.

class Editor(pz.App):
    def __init__(self):
        self.saved = 0

    def save(self):                      # on_press: called with nothing
        self.saved += 1

    def view(self):
        return pz.row([
            ui.button("Save", self.save, icon="save", variant="solid", keys="ctrl-s"),
            ui.button("Reset", lambda: setattr(self, "saved", 0), variant="ghost"),
            ui.label(f"Saved {self.saved} times"),
        ], spacing=8, align="center")

class Editor(pz.App):
    saved = 0

    def update(self, message):           # every button sends a message here
        match message:
            case "save":
                self.saved += 1
            case "reset":
                self.saved = 0

    def view(self):
        return pz.row([
            ui.button("Save", "save", icon="save", variant="solid", keys="ctrl-s"),
            ui.button("Reset", "reset", variant="ghost"),
            ui.label(f"Saved {self.saved} times"),
        ], spacing=8, align="center")

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    saved: int = 0


def view(state, set_state):              # a pure function: state in, widgets out
    return pz.row([
        ui.button("Save", lambda: set_state(saved=state.saved + 1), icon="save", variant="solid"),
        ui.button("Reset", lambda: set_state(saved=0), variant="ghost"),
        ui.label(f"Saved {state.saved} times"),
    ], spacing=8, align="center")

Consejos

Propiedades y API

`ui.button`

button(
    content=None,
    on_press=None,
    *,
    icon=None,
    icon_position='start',
    icon_color=None,
    variant='filled',
    tint=None,
    size='md',
    selected=False,
    disabled=False,
    full_width=False,
    keys=None,
    loading=False,
    tooltip=None,
    theme=None,
    **style,
)

Un botón con tema, con variantes, tamaños, un icono y un atajo.

Propiedad	Por defecto	Descripción
`content`	`None`	Texto o widget.
`icon`	`None`	Nombre de un icono de Lucide (`pyzed icons` los lista).
`icon_position`	`"start"`	`"start"` o `"end"`.
`icon_color`	`None`	Color del icono: un token del tema o un color hex.
`variant`	`"filled"`	`"filled"`, `"ghost"`, `"subtle"`, `"outline"`, `"solid"`, `"tinted"`, o un color semántico: `"accent"`, `"error"`, `"warning"`, `"success"`, `"info"`.
`tint`	`None`	Color de las variantes `solid` y `tinted`.
`size`	`"md"`	`"xs"`, `"sm"`, `"md"` o `"lg"`.
`selected`	`False`	Lo marca como seleccionado.
`disabled`	`False`	Lo deshabilita (ignora los clics).
`full_width`	`False`	Ocupa todo el ancho.
`keys`	`None`	Atajo que se muestra al final, escrito como texto: `"ctrl-s"`, `"cmd-k cmd-s"`.
`loading`	`False`	Muestra un spinner en lugar del icono e ignora las pulsaciones (mantén una suscripción `pz.every(1/30, ...)` mientras gira).
`tooltip`	`None`	Texto que aparece al pasar el ratón.
`theme`	`None`	Tema a usar en lugar del actual (`pyzed.theme.current()`).
`**style`	—	Cualquier parámetro de estilo de `pyzed.button` (`bg`, `hover_bg`, `color`…).

Eventos: on_press (eventos).

Referencia completa →

`pz.button`

button(
    content,
    on_press=None,
    *,
    padding=None,
    width=None,
    height=None,
    bg=None,
    color=None,
    border_color=None,
    border_width=0.0,
    radius=None,
    shadow=None,
    hover_bg=None,
    hover_color=None,
    hover_border_color=None,
    pressed_bg=None,
    disabled_color=None,
    clip=False,
)

Un botón sin estilo predefinido. Para el botón con tema usa ui.button.

Propiedad	Por defecto	Descripción
`content`	obligatorio	Contenido del botón.
`padding`	`None`	Relleno interior: `8`, `(vertical, horizontal)` o `(arriba, derecha, abajo, izquierda)`.
`width`	`None`	Ancho: píxeles, `"fill"`, `"shrink"` o `"fill:N"` (proporción).
`height`	`None`	Alto: píxeles, `"fill"`, `"shrink"` o `"fill:N"` (proporción).
`bg`	`None`	Color de fondo (`"#rrggbb[aa]"`, `(r, g, b[, a])` o `"transparent"`).
`color`	`None`	Color del texto o del icono.
`border_color`	`None`	Color del borde.
`border_width`	`0.0`	Grosor del borde en píxeles.
`radius`	`None`	Radio de las esquinas: un número o `(sup_izq, sup_der, inf_der, inf_izq)`.
`shadow`	`None`	Sombra: `(color, (dx, dy), desenfoque)`.
`hover_bg`	`None`	Fondo al pasar el ratón.
`hover_color`	`None`	Color del texto al pasar el ratón.
`hover_border_color`	`None`	Color del borde al pasar el ratón.
`pressed_bg`	`None`	Fondo mientras se pulsa.
`disabled_color`	`None`	Color del texto cuando está deshabilitado.
`clip`	`False`	Recorta el contenido que se sale de los límites.