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

# Icon Button

Cara menambahkan Icon Button component

Berikut langkah-langkah untuk menambahkan Icon Button *component*

* Buka Qore App Editor 

* Pada tab library, di section button pilih Icon Button *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FCfPLbftJQS5qmwSESLNH%2Fbtn4.png?alt=media&amp;token=81aa296b-08ea-4fc0-9659-3b45b5eab656" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka Icon Button *component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FlISZDAheJeBtEv6UNHph%2Fbtn41.png?alt=media&amp;token=f9329b29-6dd9-442d-8b66-3bbfd9c72883" alt=""><figcaption></figcaption></figure>

Properties dari Icon Button component adalah&#x20;

Design :

* Icon : mengatur icon yang ditampilkan pada button
* Variant : mengatur style atau tampilan button
* Size : mengatur ukuran button, apakah large, medium, small, atau extra small

Berikut contoh Icon Button yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2FiMamdPWAS20vXPXHYQJU%2Fbtn42.png?alt=media&amp;token=855b49fd-310c-424d-8d18-a9da573ceb82" alt=""><figcaption></figcaption></figure>