About JSQFlatButton

JSQFlatButton is a lightweight and customizable flat button for iOS written in Swift. It provides a clean and modern look for buttons in your app.


  • Beautiful flat design
  • Easy to customize
  • Supports different button styles
  • Provides various animations
  • Compatible with Swift


To install JSQFlatButton in your project, you have two options:

1. CocoaPods

To integrate JSQFlatButton using CocoaPods, add the following line to your Podfile:

pod 'JSQFlatButton'

2. Manual

Alternatively, you can manually add the JSQFlatButton framework to your project by downloading the latest release from the GitHub repository.


To use JSQFlatButton in your app, follow these steps:

Create a Button

Create a new instance of JSQFlatButton and customize its appearance.

import JSQFlatButton

let flatButton = JSQFlatButton(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
flatButton.setTitle("Button Title", for: .normal)
flatButton.setTitleColor(.white, for: .normal)
flatButton.setBackgroundColor(.blue, for: .normal)

Button Styles

JSQFlatButton provides different button styles to choose from. Use the style property to set the desired style:

flatButton.style = .rounded     // Rounded corners
flatButton.style = .square      // Square corners
flatButton.style = .pill        // Pill-shaped button

Button Animations

You can apply animations to JSQFlatButton using the isAnimated property:

flatButton.isAnimated = true     // Apply animations
flatButton.isAnimated = false    // Disable animations

Add Button to View

Add the JSQFlatButton instance to your view by using the addSubview method:



JSQFlatButton allows you to customize its appearance and behavior by using the following properties:

Button Colors

You can set the font color, background color, and border color for different button states:

// For normal state
flatButton.setTitleColor(.white, for: .normal)
flatButton.setBackgroundColor(.blue, for: .normal)
flatButton.setBorderColor(.blue, for: .normal)

// For highlighted state
flatButton.setTitleColor(.white, for: .highlighted)
flatButton.setBackgroundColor(.darkBlue, for: .highlighted)
flatButton.setBorderColor(.darkBlue, for: .highlighted)

Button Size

You can adjust the button’s size by setting its frame:

flatButton.frame = CGRect(x: 0, y: 0, width: 200, height: 40)

Button Fonts

You can customize the font of the button’s title:

flatButton.titleLabel?.font = UIFont.systemFont(ofSize: 16)


JSQFlatButton requires iOS 10.0 or later and is compatible with apps written in Swift.


JSQFlatButton is released under the MIT license. See LICENSE for more details.