ToolbarItem¶

The base class for all toolbar components. You typically won't use ToolbarItem directly—instead use specific components like Button, Select, or TextInput.

Components¶

All toolbar components inherit from ToolbarItem:

Category	Components
Actions	Button
Selection	Select, MultiSelect, RadioGroup, TabGroup
Text Input	TextInput, TextArea, SearchInput, SecretInput
Numeric	NumberInput, DateInput, SliderInput, RangeInput
Toggles	Toggle, Checkbox
Layout	Div, Marquee

Common Properties¶

All toolbar items inherit these properties:

Property	Type	Description
`component_id`	str	Unique identifier for dynamic updates
`type`	str	Component type (auto-set)
`disabled`	bool	Whether the component is disabled

Component ID¶

The component_id is essential for dynamic updates:

from pywry import PyWry, Toolbar, Button

app = PyWry()

def on_click(data, event_type, label):
    # Update the button dynamically
    app.emit("toolbar:set-value", {
        "componentId": "my-button",
        "label": "Clicked!",
        "disabled": True,
    }, label)

app.show(
    "<h1>Demo</h1>",
    toolbars=[
        Toolbar(position="top", items=[
            Button(
                component_id="my-button",  # ID required for dynamic updates
                label="Click Me",
                event="action:click",
            )
        ])
    ],
    callbacks={"action:click": on_click},
)

Type System¶

Each component has a type that's automatically set:

Button(...)       # type="button"
Select(...)       # type="select"
TextInput(...)    # type="text"
Toggle(...)       # type="toggle"

This type is used internally for rendering and serialization.

Disabled State¶

All components can be disabled:

from pywry import PyWry, Toolbar, Button

app = PyWry()

def on_click(data, event_type, label):
    # Disable button after click
    app.emit("toolbar:set-value", {
        "componentId": "submit-btn",
        "disabled": True,
        "label": "Submitting...",
    }, label)

app.show(
    "<h1>Form</h1>",
    toolbars=[
        Toolbar(position="top", items=[
            Button(
                component_id="submit-btn",
                label="Submit",
                event="form:submit",
            )
        ])
    ],
    callbacks={"form:submit": on_click},
)

Creating Custom Components¶

For advanced use cases, you can extend ToolbarItem:

from pywry.toolbar import ToolbarItem

class CustomProgress(ToolbarItem):
    """A custom progress bar component."""

    type: str = "progress"  # Custom type
    value: int = 0
    max: int = 100

    def build_html(self) -> str:
        percentage = (self.value / self.max) * 100
        return f'''
        <div class="custom-progress" data-component-id="{self.component_id}">
            <div class="progress-bar" style="width: {percentage}%"></div>
            <span>{self.value}/{self.max}</span>
        </div>
        '''

API Reference¶

Bases: BaseModel

Base class for all toolbar items.

Attributes:

Name	Type	Description
`component_id`	`str`	Unique identifier for state tracking (auto-generated if not provided).
`label`	`str`	Display label (meaning varies by item type).
`description`	`str`	Tooltip/hover text for accessibility and user guidance.
`event`	`str`	Event name emitted on interaction (format: `namespace:event-name`).
`style`	`str`	Optional inline CSS applied to the component wrapper.
`disabled`	`bool`	Whether the item is disabled (default: False).

auto_generate_component_id ¶

auto_generate_component_id() -> ToolbarItem

Auto-generate component_id based on type if not provided.

validate_event_name `classmethod` ¶

validate_event_name(v: str) -> str

Validate event follows namespace:event-name pattern.

build_html ¶

build_html() -> str

Build HTML for this toolbar item. Override in subclasses.