# Button

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

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

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

***

## プロパティ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-19a89c865f78c29266e1675b307da092f1f5d9eb%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E3%83%9C%E3%82%BF%E3%83%B3.png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

#### 非表示

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

#### 無効

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

***

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

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

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

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

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% 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つから選択できます。