# Button

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FOmVeGQnsu6kMNLe5l3Sa%2Fimage.png?alt=media&#x26;token=d77dfa06-179c-4fed-98ba-db54965b9936" alt=""><figcaption></figcaption></figure>

## Content

### Button

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2F8q7lIzVbaytLxYZ0KMO7%2Fimage.png?alt=media&#x26;token=771c5362-3ec4-417c-87e6-56e575310dc8" alt=""><figcaption></figcaption></figure>

#### Button Text

The text displayed on the button&#x20;

#### Button Click Action

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2Fpr0wWlSViGHxj3pNQ4gq%2Fimage.png?alt=media&#x26;token=58f3cf73-cbb4-4648-b044-3b341a03fa17" alt=""><figcaption></figcaption></figure>

* ***Open email client***: Enter the email that recipient should send to
* ***Click to call***: Enter the Phone number
* ***Open in the new window***
  * ***Static***: Enter text
  * ***Dynamic***: Select field and index

#### Width&#x20;

It allows you to change the width of the button in pixel or %

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FOrdKqG4NL2746Ggc2Ln1%2Fimage.png?alt=media&#x26;token=89fd8a2b-1864-41f8-bdc2-4d228204d809" alt=""><figcaption></figcaption></figure>

#### Align

It allows you to change the alignment of the button (left, center, right)

#### Button Size

The size of the button includes X Small, Small, Medium, Large, X Large, X2 Large

## Advanced

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FOoyY50EcXg5ldwNuBLYx%2Fimage.png?alt=media&#x26;token=ac6d9a94-1f15-4439-8a64-6388bb2810f6" alt=""><figcaption></figcaption></figure>

### Button Styling

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2Fr2JoUsqbcm0kdmHdB8gk%2Fimage.png?alt=media&#x26;token=68fc2da0-0c6d-4a1f-9e4b-c557d3ba2e71" alt=""><figcaption></figcaption></figure>

#### **Background color:**

Apply background color of Button block.

#### Font Settings

It includes Font family, Font color, Font size, Font weight, Line height, Letter spacing, etc.

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2Fm7zue7P3l2ND3qFrMJK5%2Fimage.png?alt=media&#x26;token=cd2ea2de-8348-48f4-ba4c-6e75c17d95b0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FAF0yTdioSG4gZYCdzcW7%2Fimage.png?alt=media&#x26;token=d5e29d7b-3393-4310-a49c-e0d994ef35a2" alt=""><figcaption></figcaption></figure>

#### Border

It allows you to specify the style, width, and color of an element's border

#### Rounded Corners

It allows you to define the radius of an element's corners

#### Spacing

* ***Inner Spacing (Padding)***: \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin)***: \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

### Container Styling

#### **Background color:**

Apply background color of Text block.

#### **Border**

It allows you to specify the style, width, and color of an element's border

#### **Spacing**

* ***Inner Spacing (Padding):*** \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin):*** \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

#### Custom ID attribute

The ID of a block, which is used in ***Custom CSS, Custom Javascript***

#### Custom Class attribute

The class of a block, which is used in ***Custom CSS, Custom Javascript***

### **Responsive Design**

The specific settings in this section will vary depending on device type designing

**Desktop mode**:

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FcgjSblKKeIhbeZGJueZs%2Fimage.png?alt=media&#x26;token=6abef7bc-f1f8-40b9-b83f-653175b49907" alt=""><figcaption></figcaption></figure>

Hide on Desktop: Hide the Column block when recipient reads the email template on Desktop.

&#x20;

**Mobile mode**:

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FgQW1ODqdcnDDkMCmoQgr%2Fimage.png?alt=media&#x26;token=1cb2b039-0b1b-410a-b8ac-128256215cec" alt=""><figcaption></figcaption></figure>

Hide on Mobile: Hide the Column block when recipient reads the email template on Mobile.

### Display condition

You can set the condition to display the button

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2Fkju9criJBSSH4qHF3b6I%2Fimage.png?alt=media&#x26;token=c681d116-01d1-4d7e-b8ca-9fb652bf0c40" alt=""><figcaption></figcaption></figure>

* ***Condition***: It includes ***None, Show when, Hidden when***
* ***Field***: It contains ***Business Object attributes***
* ***Index***: The number of the row in the ***Business Objects Data table***
* ***Operator***: It includes ***contains, does not contain, starts with, doesn't start with, ends with, doesn't end with***, etc.
* ***Value***: you can input the value or select an ***attribute from Business Object or Event***