# Button

The button is basically a container *(with a background or a border)* containing a text.

#### Available properties:

| Property                                                                                                                                           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **payload**                                                                                                                                        | [Same as Text Payload documentation](https://developers.abyssale.com/rest-api/generation/text#payload)                                                                                                                                                                                                                                                                                                                                                                              |
| **color**                                                                                                                                          | [Same as Text Color documentation](https://developers.abyssale.com/rest-api/generation/text#color)                                                                                                                                                                                                                                                                                                                                                                                  |
| **background\_color**                                                                                                                              | Same as `color`                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><strong>font</strong><br><strong>font\_weight</strong></p>                                                                                      | [Same as Text Font documentation](https://developers.abyssale.com/rest-api/generation/text#font)                                                                                                                                                                                                                                                                                                                                                                                    |
| **font\_size**                                                                                                                                     | Number. **Force font size in pixels** (must be > 1)                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **line\_height**                                                                                                                                   | Number. Force line height in percentage (must be > 1). *This parameter is only applied when the text is a multiline one.*                                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>shadow\_color</strong><br><strong>shadow\_blur</strong><br><strong>shadow\_offset\_x</strong><br><strong>shadow\_offset\_y</strong></p> | [Go to Shadow documentation](https://developers.abyssale.com/rest-api/generation/element-properties/..#shadow)                                                                                                                                                                                                                                                                                                                                                                      |
| **auto\_resize**                                                                                                                                   | <p>Boolean: Automatically adjusts the text size to fit within its container <br><em>(If set to true, <strong><code>min\_font\_size</code></strong> must be defined)</em></p>                                                                                                                                                                                                                                                                                                        |
| **min\_font\_size**                                                                                                                                | <p>Number: Specifies the minimum font size allowed when auto-resizing text. <br><em>(auto\_resize must be set to <strong>true</strong>)</em></p>                                                                                                                                                                                                                                                                                                                                    |
| **text\_transform**                                                                                                                                | <p>String: Force the text to be transformed to one of the following formats:</p><ul><li>"<code>uppercase</code>" – All letters become uppercase (e.g., EXAMPLE).</li><li>"<code>lowercase</code>" – All letters become lowercase (e.g., example).</li><li>"<code>titlecase</code>" – The first letter of each word is capitalized (e.g., Example Text).</li><li>"<code>capitalize</code>" – Only the first letter of the entire text is capitalized (e.g., Example text).</li></ul> |

#### Example:

<table data-header-hidden><thead><tr><th width="376"></th><th></th></tr></thead><tbody><tr><td><code>"payload": "My click to action"</code><br><code>"color": "#FFFFFF"</code><br><code>"background_color": "#1A47FF"</code></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2Fd0BNKrcyyamIx4QCrbZ9%2Fbutton-db647e3a.jpeg?alt=media&#x26;token=420ce54e-e2e7-4617-9e03-695ea2f2fe31" alt=""></td></tr><tr><td><code>"payload": "My click to action"</code><br><code>"color": "cmyk(0,0,0,0,100)"</code><br><code>"background_color":"cmyka(90,72,0,0,100)"</code></td><td><img src="https://3568284716-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHvY8mOYKzvcoxVpCu4FE%2Fuploads%2Fd0BNKrcyyamIx4QCrbZ9%2Fbutton-db647e3a.jpeg?alt=media&#x26;token=420ce54e-e2e7-4617-9e03-695ea2f2fe31" alt=""></td></tr></tbody></table>