> ## Documentation Index
> Fetch the complete documentation index at: https://zero-true.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

<Card title="Example Usage" icon="code">
  ```python theme={null}
  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])

  ```
</Card>

<Card title="Example Output" icon="computer">
  <iframe src="https://published.zero-true.com/srrey/examplebutton/" width="100%" height="300" />
</Card>

## 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.

<Note> 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.</Note>

## JSON Schema

<Accordion title="Field Defenitions">
  ```json theme={null}
  {
     "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"
     ]
  }
  ```
</Accordion>

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

<ResponseField name="zero_true.Button" type="Zero True Component">
  <Expandable title="properties">
    <AccordionGroup>
      <Accordion title="field color">
        **field color:** str = 'primary';
        Color of the button.
      </Accordion>

      <Accordion title="field component">
        **field component:** str = 'v-btn';
        Vue component name.
      </Accordion>

      <Accordion title="field disabled">
        **field disabled:** bool = False;
        If true, the button is disabled.
      </Accordion>

      <Accordion title="field outlined">
        **field outlined:** bool = False;
        If true, the button will have an outlined style.
      </Accordion>

      <Accordion title="field text">
        **field text:** str = 'Click Me';
        Label displayed on the button.
      </Accordion>

      <Accordion title="field triggerEvent">
        **field triggerEvent:** str = 'click';
        Trigger event to send code to the backend.
      </Accordion>

      <Accordion title="field value">
        **field value:** bool = False;
        Whether the button has been clicked.
      </Accordion>
    </AccordionGroup>
  </Expandable>
</ResponseField>

<Card title="Methods">
  classmethod *get\_value\_from\_global\_state*(value, values)
</Card>