Button

Example Usage

import zero_true as zt

# Create a Button component
sample_button = zt.Button(
  id="sample_button",
  color="primary",          # Color of the button
  disabled=False,           # If true, the button is disabled
  outlined=False,           # If true, the button will have an outlined style
  text="Click Me",          # Label displayed on the button
  triggerEvent="click",     # Trigger event to send code to the backend
  value=False               # Whether the button has been clicked
)

# Assuming you have a mechanism to render or use this Button within a layout
layout = zt.Layout(components=[sample_button])

Example Output

Overview

pydantic model zero_true.Button

The Button component is a fundamental element in user interfaces, offering a simple yet versatile method for user interaction. This standard button can be customized with different colors, labels, and styles such as outlined to match the design requirements of any application.

It supports enabling or disabling based on application logic, and its functionality extends to capturing clicks through event triggers that can be connected to backend processes. The straightforward implementation makes it an essential tool for initiating actions, submitting forms, or triggering events within a UI.

JSON Schema

Field Defenitions

{
   "title": "Button",
   "description": "Standard button UI component",
   "type": "object",
   "properties": {
      "id": {
         "description": "Unique id for a component",
         "title": "Id",
         "type": "string"
      },
      "variable_name": {
         "default": "",
         "description": "Optional variable name associated with a component",
         "title": "Variable Name",
         "type": "string"
      },
      "component": {
         "default": "v-btn",
         "description": "Vue component name",
         "title": "Component",
         "type": "string"
      },
      "value": {
         "default": false,
         "description": "Whether the button has been clicked",
         "title": "Value",
         "type": "boolean"
      },
      "text": {
         "default": "Click Me",
         "description": "Label displayed on the button",
         "title": "Text",
         "type": "string"
      },
      "color": {
         "default": "primary",
         "description": "Color of the button",
         "title": "Color",
         "type": "string"
      },
      "disabled": {
         "default": false,
         "description": "If true, the button is disabled",
         "title": "Disabled",
         "type": "boolean"
      },
      "outlined": {
         "default": false,
         "description": "If true, the button will have an outlined style",
         "title": "Outlined",
         "type": "boolean"
      },
      "triggerEvent": {
         "default": "click",
         "description": "Trigger event to send code to the backend",
         "title": "Triggerevent",
         "type": "string"
      }
   },
   "required": [
      "id"
   ]
}

Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.

zero_true.Button

Zero True Component

Show properties

field color

field color: str = ‘primary’; Color of the button.

field component

field component: str = ‘v-btn’; Vue component name.

field disabled

field disabled: bool = False; If true, the button is disabled.

field outlined

field outlined: bool = False; If true, the button will have an outlined style.

field text

field text: str = ‘Click Me’; Label displayed on the button.

field triggerEvent

field triggerEvent: str = ‘click’; Trigger event to send code to the backend.

field value

field value: bool = False; Whether the button has been clicked.

Methods

classmethod get_value_from_global_state(value, values)