# Button

## <mark style="color:green;">class</mark> **UI.Button**

<figure><img src="https://3836407116-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaFce5BqRsGvQObqcfG7q%2Fuploads%2FcZUCoVRIFjV6GRYuxHGH%2Fex11.png?alt=media&#x26;token=568f30b9-7304-41e8-aa2d-abbc32124248" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**All attributes are read/write**: You can access (read) and modify (set) any attribute at any time, and the changes will immediately reflect in the UI.
{% endhint %}

<pre class="language-python"><code class="lang-python"><strong># setting up click handler
</strong><strong>def click_handler():
</strong>    print('clicked')

# Creating basic button
card.create_ui_element(UI.Button, label="Click me!", onClick=click_handler)

# Setting attributes
button = card.create_ui_element(
    UI.Button,
    label="Click me!",
    variant="ghost",
    size="sm",
    color="danger",
    full_width=True,
    onClick=click_handler
)

##################################
# Example with asnychronus updates

button = card.create_ui_element(UI.Button, label="Submit")

async def click_handler():
    button.loading=True
    # Do some async tasks, for example fetch data from an API...
    button.loading=False
    # perform other updates

button.onClick = click_handler
</code></pre>

<table><thead><tr><th width="334">Attribute</th><th>Value</th></tr></thead><tbody><tr><td>label</td><td>any <code>string</code></td></tr><tr><td>variant</td><td><p><code>"solid"</code></p><p><code>"bordered"</code></p><p><code>"ghost"</code></p><p><code>"light"</code></p><p><code>"flat"</code></p><p><code>"cta"</code><br><br>Default: <code>"solid"</code></p></td></tr><tr><td>color</td><td><p><code>"primary"</code></p><p><code>"default"</code></p><p><code>"success"</code></p><p><code>"danger"</code><br></p><p>Note: If <code>cta</code> variant is used, custom color will not be applied.</p><p><br>Default: <code>"primary"</code></p></td></tr><tr><td>size</td><td><p><code>"sm"</code></p><p><code>"md"</code><br><br>Default: <code>"md"</code></p></td></tr><tr><td>full_width</td><td><code>True | False</code><br><br>Default: <code>False</code></td></tr><tr><td>disabled</td><td><code>True | False</code><br><br>Default: <code>False</code></td></tr><tr><td>loading</td><td><code>True | False</code><br><br>Default: <code>False</code></td></tr><tr><td>margin</td><td>See <a href="../..#margin">Margin</a>.<br><br>Default: <code>"m-0"</code></td></tr><tr><td>visible</td><td>See <a href="../..#visible">Visible</a>.<br><br>Default: <code>True</code></td></tr></tbody></table>

### Events

| Event   | Arguments | Description                           |
| ------- | --------- | ------------------------------------- |
| onClick | -         | Triggered when the button is clicked. |
