# Button

# Basics

The Button block can be created with a Div and child Paragraph and Icon blocks, but is essentially a quick block that allows you to input text and choose an icon in a matter of seconds.

A Button serves as a bold link to pages, assets and forms.

If you want to add a button outside any other block on the page:

  1. Click on the  ​​icon to open the Inserter Panel
  2. Search for the Cwicly Button block
  3. Click on the Cwicly Button block to insert it into your page

If you want to add a button inside a parent block:

  1. Open the Quick Insert panel in the parent block
  2. Search for the Cwicly Button block
  3. Click on the Cwicly Button block to insert it into your parent block

# Text

The Button block integrates a text field.

  1. Click on the Click here text inside the desired Button block
  2. Enter the desired text

# Icon

The Button block integrates an icon element that can be added before or after the text.

You can modify the color, size and spacing of the icon.

# Active Icon

The Icon property allows you to define whether you want to have a visible icon inside the button block.

  1. Select a Button block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Icon panel
  5. Toggle the Icon property to activate or deactivate it

# Select Icon

Use the Icon Selector to select the desired icon.

  1. Select a Button block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Icon panel
  5. Find the Icon property
  6. Click on the 🌏 icon to open the Icon Selector

# Icon Size

The Icon Size property defines the size of the icon.

  1. Select a Button block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Icon panel
  5. Find the Icon Size property
  6. Enter the desired value

# Icon Spacing

The Icon Spacing property allows you to define the margin added between the text and the icon inside the button block.

  1. Select a Button block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Icon panel
  5. Find the Icon Spacing property
  6. Enter the desired value

# Icon Position

The Icon Position property allows you to define whether the icon should be placed before (to the left) or after (to the right)

  1. Select a Button block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Icon panel
  5. Find the Icon Position property
  6. Select the desired position (before, after)