# Floating Button

Cara menambahkan Floating Button component

Berikut langkah-langkah untuk menambahkan Floating Button *component*

* Buka Qore App Editor 

* Pada tab library, di section button pilih Floating 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%2Fhpac8qgX1V3DHJOR9wSV%2Fbtn5.png?alt=media&#x26;token=65c9879b-fa89-4b0f-b6a3-cbf6f524423a" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka Floating 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%2FEn3ySK4TGGmJTdQtvUW6%2Fbtn51.png?alt=media&#x26;token=db2922b1-c327-498f-9dfe-6095203a3c76" alt=""><figcaption></figcaption></figure>

Properties dari Floating Button component adalah&#x20;

Design :

* Icon Button : mengatur icon yang ditampilkan pada button
* Size : mengatur ukuran button, apakah small, medium, atau large
* Show on : mengatur floating button akan tampil pada tipe device apa saja, apakah mobile, tablet, dekstop, atau semua tipe device
* Type : mengatur tipe dari button, terdapat pilihan action dan expand. Jika action&#x20;

Berikut contoh Floating Button yang telah dimodifikasi

<figure><img src="https://2184609992-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2oMlC98xrWRwMo6hcAGn%2Fuploads%2Fq3EQbdzNg5glmKwc4Ds8%2Fbtn52.png?alt=media&#x26;token=513d46ed-0b37-4478-9ee9-f343a73a2525" alt=""><figcaption></figcaption></figure>