> For the complete documentation index, see [llms.txt](https://learn.mondayhero.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.mondayhero.io/v1-mac-app/working-with-monday-hero/component-convert-to-ios-android-code/convert-button-design-to-ios-android-code.md).

# Convert to Button

## Button Design to Swift/Kotlin Code

Buttons are the most used components in apps and they have app-specific actions. Buttons can have a **title, background,** or **image** as property/class**.** They may include more than one property. A button can have both properties at the same time. For example, background and title, or title and image, etc.

**Buttons have 3 properties in Monday Hero:**

**Title:** The text displayed over the button. 

**Background Image:** The image used as the background of the button. Mostly it used when there is a text over the button.

**Image:** Icons are good examples of image buttons. They designed for having app-specific actions. 

![Button examples with different properties.](/files/-MLGwlZew4QaKOkWNT1i)

{% hint style="info" %}
If a button has only a **background color**, Monday Hero can automatically understand the background color of the button. It will be defined as a `View` with the color.
{% endhint %}

In this case, Monday Hero automatically understands the blue rectangle as View and gets background color from the rectangle. So, defining the "Follow" label as the **Title** of the button will be enough. How to create a button and add a property/class can be seen in the GIF below.

![Example of button creation that has a title in Monday Hero.](/files/-MGif7Y6holkg_MzeIqE)

When the button is created, the generated code will be like below.

### Generated iOS/Android Code

{% tabs %}
{% tab title="iOS" %}
The button code created is added to the page with the styles. Constraints are defined in the Storyboard file.

```swift
//ProfilePageViewController.swift
import UIKit

class ProfilePageViewController: UIViewController {
	
	// MARK: - Properties
  //Connection from an Interface Builder to a UI component
  
  // The button with an image and text
	@IBOutlet private weak var followButton: UIButton!
	@IBOutlet private weak var buttonImageView: UIImageView!
	
	//Button with an only image
	@IBOutlet private weak var profileButton: UIButton!

 	//Button with a text and background image
  @IBOutlet private weak var loginButton: UIButton!
  
	override func viewDidLoad() {
		super.viewDidLoad()
		setupViews()
		setupLayout()
	}
}

extension ProfilePageViewController {
	private func setupViews() {
		
		// The button with an image and text
		followButton.layer.cornerRadius = 6
		followButton.layer.masksToBounds =  true 
		followButton.backgroundColor = UIColor.cerulean
		followButton.setTitle(NSLocalizedString("follow", comment: ""),for: .normal)
		followButton.setTitleColor(UIColor.daisy, for: .normal)
		followButton.titleLabel?.font = UIFont.textStyle7
		followButton.contentHorizontalAlignment = .leading 
		followButton.contentEdgeInsets = UIEdgeInsets(top: 6, left: 9 , bottom: 6, right: 9)

		//Button with an only image
		profileButton.setImage(UIImage(named: "profileIcon") , for: .normal)
		
		//Button with a text and background image
		loginButton.setTitle(NSLocalizedString("login", comment: ""),for: .normal)
		loginButton.setTitleColor(UIColor.white, for: .normal)
		loginButton.titleLabel?.font = UIFont.textStyle2
		loginButton.contentHorizontalAlignment = .center 
		loginButton.setBackgroundImage(UIImage(named: "loginBackground") , for: .normal)
	}

	private func setupLayout() { 
		//Constraints are defined in Storyboard file.
	}
}

```

{% endtab %}

{% tab title="Android" %}
The button code created and added to the page with the styles.  

```markup
<!--activityUserProfile.xml-->
<!--The button with a background color and text-->
<Button
	android:id="@+id/followButton"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="@string/follow"
	android:textAllCaps="false"
	android:background="@drawable/followbutton_background_drawable"
	style="@style/textStyle11"
	android:textAlignment="textStart"
	android:textColor="?attr/daisy"
	android:paddingLeft="9dp"
	android:paddingRight="9dp"
	android:paddingTop="6dp"
	android:paddingBottom="6dp"
	android:layout_marginEnd="56dp"
	android:layout_marginTop="42dp"
	android:layout_marginBottom="37dp"
	app:layout_constraintStart_toEndOf="@+id/profilPictureImageView"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/nolanAlexTextView"
	app:layout_constraintBottom_toTopOf="@+id/alexanderNolanTextView"/>
	
<!--Button with an only image-->	
<Button
	android:id="@+id/profileButton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textAllCaps="false"
	android:background="@android:color/transparent"
	android:drawableBottom="@drawable/profileicon"
	android:layout_marginEnd="23dp"
	android:layout_marginBottom="13dp"
	app:layout_constraintStart_toEndOf="@+id/buttonImageView"
	app:layout_constraintEnd_toEndOf="@+id/baseView"
	app:layout_constraintTop_toBottomOf="@+id/userPicturesBID"
	app:layout_constraintBottom_toBottomOf="@+id/baseView"/>

<!--Button with a text and background image -->
<Button
	android:id="@+id/loginButton"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	android:text="@string/login"
	android:textAllCaps="false"
	android:background="@android:color/transparent"
	style="@style/textStyle15"
	android:textAlignment="center"
	android:textColor="?attr/white"
	android:layout_marginStart="108dp"
	android:layout_marginEnd="86dp"
	android:layout_marginBottom="18dp"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintTop_toBottomOf="@+id/rectangleView"
	app:layout_constraintBottom_toBottomOf="parent"/>
```

```markup
<!--Drawables/followbutton_background_drawable.xml-->
<!--The button with a background color and text-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="?attr/cerulean"/>
      <corners android:radius="6dp"/>
    </shape>
  </item>
</selector>
```

{% endtab %}
{% endtabs %}

That's all for creating buttons on Monday Hero.