> For the complete documentation index, see [llms.txt](https://docs.webstudio.is/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webstudio.is/university/core-components/button.md).

# Button

> See [MDN: \<button>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)

The Button component creates clickable buttons for user interactions. Buttons trigger actions like submitting forms, opening dialogs, or navigating when combined with other components.

## When to Use

Use Button for:

* Form submissions
* Triggering actions (open dialog, toggle, etc.)
* Call-to-action elements
* Interactive controls

{% hint style="warning" %}
Buttons are for actions, not navigation. For navigation links, use the [Link](/university/core-components/link.md) component instead. If you need a link styled as a button, style the Link component accordingly.
{% endhint %}

## How to Use

1. Drag a **Button** component from Components > Forms onto your canvas
2. Edit the button text
3. Style using the Style Panel
4. Place inside a Form for submissions, or use HTML Embed scripts for custom interactivity

## Properties

Some commonly used properties (see the Settings panel for all available options):

| Property     | Description                                                                 |
| ------------ | --------------------------------------------------------------------------- |
| **type**     | `submit` (form submission), `reset` (clear form), or `button` (general use) |
| **disabled** | Prevents interaction when true                                              |
| **name**     | Name for form submission                                                    |
| **value**    | Value for form submission                                                   |

## Button Types

### Submit Button

Submits the parent form when clicked. Use inside [Form](/university/core-components/form.md) or [Webhook Form](/university/core-components/webhook-form.md).

### Reset Button

Clears all form fields to their default values.

### Button (Default)

General purpose button for non-form actions. Use with component interactions like opening dialogs.

## Styling States

Some common states (you can also create custom states):

* **Default** - Normal appearance
* **Hover** (`:hover`) - Mouse is over the button
* **Focus** (`:focus-visible`) - Keyboard focused
* **Active** (`:active`) - Being pressed
* **Disabled** (`:disabled`) - Cannot be clicked

## Related

* [Form](/university/core-components/form.md) – Form containers for submissions
* [Link](/university/core-components/link.md) – Navigation links
* [Input](/university/core-components/input.md) – Text input fields


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.webstudio.is/university/core-components/button.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.