@panoramax/web-viewer/docs/reference/components/ui/Button.md

Panoramax web viewer for geolocated pictures

<a name="Panoramax.components.ui.Button"></a>

## Panoramax.components.ui.Button ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
**Kind**: static class of <code>Panoramax.components.ui</code>  
**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
**Element**: pnx-button  

* [.Button](#Panoramax.components.ui.Button) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
    * [new Button()](#new_Panoramax.components.ui.Button_new)
    * [.properties](#Panoramax.components.ui.Button+properties) : <code>Object</code>

<a name="new_Panoramax.components.ui.Button_new"></a>

### new Button()
Button element displays a direct action button.
Binds to a HTML button, so you can use any events offered by it.

**Example**  
```html
<pnx-button kind="flat" size="l" @click=${() => alert("click!")}>
   Click on me
</pnx-button>
```
<a name="Panoramax.components.ui.Button+properties"></a>

### button.properties : <code>Object</code>
Component properties.

**Kind**: instance property of [<code>Button</code>](#Panoramax.components.ui.Button)  
**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| [active] | <code>boolean</code> | <code>false</code> | Whether the button is in an active state. |
| [kind] | <code>string</code> | <code>&quot;full&quot;</code> | The style variation of the button (full, fullwarn, outline, flat, superflat, inline, superinline) |
| [size] | <code>string</code> | <code>&quot;md&quot;</code> | The size of the button (sm, md, l, xl, xxl) |
| [disabled] | <code>boolean</code> | <code>false</code> | Whether the button is disabled. |
| [type] | <code>string</code> |  | The button type (e.g., 'submit'). |
| [title] | <code>string</code> |  | Tooltip text displayed when hovering over the button |