# Button

Buttonはフォームの送信やリセット機能を設置するためによく使うコンポーネントです。Dashcombが提供しているButtonは、通常のHTMLのButtonをベースにしています。加えて、管理画面の用途に合わせて、動作を柔軟に設定できるアクション機能を内蔵しています。

アクションはDashcombが提供している操作です。クエリ実行、メニューに移動、通知、コピーといった、一般的なデータ操作が提供されています。

Buttonコンポーネントにアクションを設定することで、管理画面に必要な様々な動作を実行することができます。

***

## プロパティ

Buttonコンポーネントには、以下のプロパティが含まれています。

<figure><img src="/files/H60km2KAvoDZvTwVA0fo" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

#### **オブジェクト**

ボタンオブジェクトの変数名です。Buttonコンポーネントをドラッグ＆ドロップすると、そのオブジェクトが自動的に `button1`、`button2`... と名付けられます。

ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。

（例）`{{button1.hidden}}` で `button1` の表示状態の真偽値を取得することができます。

利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。

#### 非表示

トグルスイッチをONにすると、ボタンが非表示になります。

#### 無効

トグルスイッチをONにすると、ボタンが無効になります。

***

### データ <a href="#data" id="data"></a>

#### **テキスト**

ボタンに表示されるラベルテキストです。Buttonコンポーネントをドラッグ＆ドロップすると、自動的に `Button` に設定されます。

`Button` を任意の文字列に入れ替えることはもちろん、構文 `{{オブジェクト名.プロパティ}}` を入れることにより、動的に設定することができます。

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。
{% endhint %}

（例）`Button` を `{{currentUser.name}}が提出` に書き換えると、ユーザー画面では、`ログイン中のユーザーの名前が提出` と表示されます。

現時点ではButtonのラベルはMarkdown記法をサポートしていません。

###

### アクション

Buttonコンポーネントのアクションは、以下を設定することができます。

**onClick**

ボタンのonClickイベントが発生する際に、指定アクションを実行できます。

{% hint style="info" %}
アクションの設定については、[アクションパネル](https://github.com/dashcomb/gitbook-doc/blob/master/ide/ui-component/broken-reference/README.md) のページを参照してください。
{% endhint %}

### &#x20;<a href="#appearance" id="appearance"></a>

### 外観 <a href="#appearance" id="appearance"></a>

#### **スタイル**

ボタンのスタイルを指定します。ノーマル、プライマリ、インポータント の3つから選択できます。

#### **ボタンの形**

ボタンの形を指定します。四角、丸 の2つから選択できます。


---

# Agent Instructions: 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:

```
GET https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/ui-component-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
