> For the complete documentation index, see [llms.txt](https://huongdan.cnvcdp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huongdan.cnvcdp.com/tinh-nang/dynamicaction/thiet-lap-dynamicaction/thanh-phan-component/tuong-tac.md).

# Tương tác

Cho phép người dùng thực hiện một hành động nào đó khi nhấn vào. Button có thể được sử dụng để điều hướng đến các trang khác (trang của DynamicAction hoặc trang tại Mini App) tuỳ thuộc vào cấu hình.

Ví dụ: Form đăng ký tham gia chuỗi học tiếng anh, ngay tại trang 1: Trang giới thiệu, tạo một nút button để dẫn đến trang đăng ký

**Cài đặt thông số**

<figure><img src="/files/n5wYy95KWgu8dkGcRr3u" alt="" width="563"><figcaption></figcaption></figure>

* \[1] Width: Chiều rộng của nút Button. Đơn vị: % (phần trăm) so với bề rộng của điện thoại
* \[2] Height: Chiều cao của nút Button. Đơn vị: pixel

<figure><img src="/files/RyIaIkqZA0z5sZEvdTA0" alt="" width="563"><figcaption></figcaption></figure>

* \[3] Padding: Khoảng cách của nội dung trong Button so với lề Button

<figure><img src="/files/pLOoSozRLs5fiHPRG0g2" alt="" width="375"><figcaption><p>Khoảng cách giữa nội dung trong Button so với lề Button khi padding là 10 pixel</p></figcaption></figure>

<figure><img src="/files/un8bj215pXkH188P0SFs" alt="" width="375"><figcaption><p>Khoảng cách giữa nội dung trong Button so với lề Button khi padding là 30 pixel</p></figcaption></figure>

* \[4] Radius: bo tròn góc\
  Có hai cách điều chỉnh:
  * Cách 1  ![](/files/4fDTmV5NZWyI1K200yOL): Điều chỉnh cùng lúc 4 phía của Button
  * Cách 2  ![](/files/vnfAyTFvXGTfaHRkfDOC): Điều chỉnh lần lượt từng phía của Button: Trên (Top); dưới (Bottom); trái (Left); phải (Right). Đơn vị: pixel
* Liên kết: Tương tự như Action, Button cũng có liên kết đến để dẫn đến trang DynamicAction hoặc trang Mini App theo cấu hình.
* Style: Chọn một trong hai dạng nền cho Button: Màu nền (chọn màu từ thư viện) và nền hình ảnh (tải ảnh từ máy).

\
Các thông số tùy chỉnh nền ảnh cho Button:

* \[5] Background-positon: vị trí trên hình được chọn làm nền Button
* \[6] Background-size: kích cỡ của hình\
  &#x20;     \+ Contain: phóng to thu nhỏ hình theo tỉ lệ để lấp đầy chiều cao **hoặc** chiều dài của khung chứa (container). Không cắt và kéo giãn hình\
  &#x20;     \+ Cover: phóng to thu nhỏ hình theo tỉ lệ để lấp đầy cả chiều cao **và** chiều dài của khung chứa (container), không để lại khoảng trống. Cắt phần hình dư thừa, không kéo giãn hình\
  &#x20;     \+ Auto: Giữ nguyên kích thước gốc
* \[7] Background-repeat: Lặp lại hình (khi kích thước chiều ngang, hay chiều rộng không đủ để làm nền cho Button)\
  &#x20;     \+ Repeat: Tự động nhận biết chiều còn thiếu để lặp lại hình theo chiều đó\
  &#x20;     \+ Repeat X: Lặp lại theo chiều ngang\
  &#x20;     \+ Repeat Y: Lặp lại theo chiều dọc\
  &#x20;     \+ No Repeat: Không lặp lại

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

* Ví dụ: Với hình trên, Button có hình nền là logo CNV, được điều chỉnh:\
  &#x20;     \+ Background-position => Left center: Logo đầu tiên bên trái được nằm trọn vẹn trong Button\
  &#x20;     \+ Background-size => Contain: Hình được phóng to/thu nhỏ để lấp đầy chiều cao của Button\
  &#x20;     \+ Background-repeat => Repeat X: Hình được lặp lại theo chiều dài (chiều ngang) để đủ làm nền cho button
* Hiển thị: Mỗi Button sẽ có thể có tối đa 3 thành phần. Có 3 loại thành phần là: text, icon và hình ảnh


---

# 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://huongdan.cnvcdp.com/tinh-nang/dynamicaction/thiet-lap-dynamicaction/thanh-phan-component/tuong-tac.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.
