Insignia

En pocas palabras

Una pastilla de color diminuta con una o dos palabras, como “beta” o “3 errores”.

Una pastilla pequeña con texto y un icono opcional. tint elige un color semántico y variant es "soft" (por defecto), "solid" o "outline".

ui.badge · Categoría: Visualización · Referencia completa →

Vista previa

Código

pz.row([
    ui.badge("accent"),
    ui.badge("success", tint="success"),
    ui.badge("warning", tint="warning"),
    ui.badge("error", tint="error", icon="circle-x"),
], spacing=8)

Cuándo usarlo

• Para estados cortos de solo lectura: beta, M (modificado), v0.4, 3 errores.
• Para un número redondo encima de un icono usa Contador.

Uso

import pyzed as pz
from pyzed import ui

pz.row([
    ui.badge("accent"),
    ui.badge("success", tint="success"),
    ui.badge("warning", tint="warning"),
    ui.badge("error", tint="error", icon="circle-x"),
], spacing=8)

Variantes

Sobre estas capturas

Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre Código bajo una captura para ver el fragmento que la dibuja; los nombres libres como on_save son tus propios callbacks.

Tinte

tint="accent"

Código

ui.badge("accent")

tint="success"

Código

ui.badge("passed", tint="success")

tint="warning"

Código

ui.badge("pending", tint="warning")

tint="error"

Código

ui.badge("failed", tint="error")

tint="info"

Código

ui.badge("info", tint="info")

tint="#c678dd"

Código

ui.badge("custom", tint="#c678dd")

Variante

variant="soft"

Código

ui.badge("soft")

variant="solid"

Código

ui.badge("solid", variant="solid")

variant="outline"

Código

ui.badge("outline", variant="outline")

Con icono

icon="sparkles"

Código

ui.badge("new", icon="sparkles")

icon="circle-x"

Código

ui.badge("3 errors", tint="error", icon="circle-x")

variant="solid", icon=

Código

ui.badge("verified", tint="success", variant="solid", icon="check")

Estados y eventos

size="sm"

Código

ui.badge("beta", size="sm")

size="lg"

Código

ui.badge("Pro", size="lg", icon="star")

on_press=

Código

ui.badge("3 issues", tint="warning", on_press=on_press)

Eventos

Insignia 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	El handler recibe	Cuándo
on_press	()	La hace pulsable.

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.

Imperativo

class Inbox(pz.App):
    def __init__(self):
        self.unread = 3

    def view(self):
        return ui.badge(f"{self.unread} new", tint="accent",
                        on_press=lambda: setattr(self, "unread", 0))   # on_press makes it clickable

Declarativo

class Inbox(pz.App):
    unread = 3

    def update(self, message):
        if message == "read all":
            self.unread = 0

    def view(self):
        return ui.badge(f"{self.unread} new", on_press="read all")

Funcional

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    unread: int = 3


def view(state, set_state):
    return ui.badge(f"{state.unread} new", on_press=lambda: set_state(unread=0))

Propiedades y API

ui.badge

badge(
    content,
    *,
    tint='accent',
    variant='soft',
    icon=None,
    size='md',
    on_press=None,
    theme=None,
)

Una píldora pequeña para estados y contadores.

Propiedad	Por defecto	Descripción
content	obligatorio	Contenido: un Widget, un texto o un número (se convierte en texto).
tint	"accent"	Color semántico: "accent", "error", "warning", "success", "info" o un token.
variant	"soft"	"soft", "solid" o "outline".
icon	None	Nombre de un icono de Lucide (pyzed icons los lista).
size	"md"	"sm", "md" o "lg".
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).

Eventos: on_press (eventos).

Referencia completa →

Relacionados

ContadorUn contador redondo que muestra 99+ por encima del máximo.

IndicadorUn punto de color para estado, presencia o cambios sin guardar.

ChipUna etiqueta compacta: pulsable como filtro y con ✕ para quitarla.