Latest 1.9
License MIT
Platforms ios 10.0, requires ARC
Frameworks UIKit


DesignableButton Language: Swift 4.0

alt demo

DesignableButton is a UIButton subclass that uses a centralised and reusable styling. In InterfaceBuilder, drag and drop a DesignableButton, choose your style and its applied instantly in InterfaceBuilder


  • One centralised class to define you main button styles so they can be reused
  • Different styles for different button states: Normal/Selected/Disabled
  • The centralised styles can be set in IB (no more IBOutlets needed for programatical styling)
  • View the style in IB in realtime. Even changing button to selected state will update IB
  • Individual buttons can override their centralised styles in IB
  • Rounded corners and borders are easy with DesignableButton
  • Buttons with an image above text are easy with DesignableButton

How to install

Add this to your CocoaPods Podfile. Note the IH prefix

pod 'IHDesignableButton'

How to use

Create an DesignableButton+Styles.swift extension file in your project

import UIKit
import IHDesignableButton // if DesignableButton is in CocoaPod
extension DesignableButton {

    override open func prepareForInterfaceBuilder() {

        DesignableButton.setDesignableStyles(isInterfaceBuilder: true)

    static func setDesignableStyles(isInterfaceBuilder: Bool = false) {

        // example style
        DesignableButton.setStyle(style: { (designableButton: DesignableButton) -> Void in
            if designableButton.isHighlighted || designableButton.isSelected {
                // replace this with your style for selected/highlighted states
                designableButton.setTitleColor(designableButton.customTextColor ?? UIColor.white, for: UIControlState())
                designableButton.backgroundColor = designableButton.selectedColor ??
                designableButton.layer.borderColor = designableButton.selectedColor?.cgColor ??
                designableButton.layer.borderWidth = designableButton.borderWidth ?? 0
            } else if designableButton.isEnabled {
                // replace this with your style for the normal state
                designableButton.setTitleColor(designableButton.customTextColor ?? UIColor.white, for: UIControlState())
                designableButton.backgroundColor = designableButton.defaultColor ??
                designableButton.layer.borderColor = designableButton.defaultColor?.cgColor ??
                designableButton.layer.borderWidth = designableButton.borderWidth ?? 0
            else {
                // replace this with your style for the disabled state
                designableButton.setTitleColor(designableButton.customTextColor ?? UIColor.lightGray, for: UIControlState())
                designableButton.backgroundColor = designableButton.disabledColor ?? UIColor.lightGray()
                designableButton.layer.borderColor = designableButton.borderColor?.cgColor ??  UIColor.gray.cgColor
                designableButton.layer.borderWidth = designableButton.borderWidth ?? 1

            // replace this with your style for all states
            designableButton.layer.cornerRadius = designableButton.cornerRadius ?? 12

            designableButton.setTitle(designableButton.titleLabel?.text, for: .normal)

        }, for: "primary") // this is the name/key of your style

In the setDesignableStyles() method you can call DesignableButton.setStyle() to create a new style. Most projects will only need a few button styles

In you AppDelegate’s application(_ , didFinishLaunchingWithOptions() call DesignableButton.setDesignableStyles()

Now in Interface Builder, drag a UIButton onto a view

Change the class to DesignableButton and the module to IHDesignableButton

Change the button type from System to Custom

Set the Button Style to "primary" or any other button style you’re created

Half price for a limited time only :)

An elegant solution for keeping views visible when the keyboard is being shown

A fully automatic status bar overlay for No Internet Connection messages

An extension to easily set your UINavigationBar transparent and hide the shadow


It’d be great to hear about any cool apps that are using DesignableButton


Distributed under the MIT License

Latest podspec

    "name": "IHDesignableButton",
    "version": "1.9",
    "summary": "A Custom UIButton with Centralised Reusable UIButton Styles, Powered by Interface Builder",
    "description": "DesignableButton allows you to declare reusable button style definitions. In Interface Builder you can easily choose these style for your DesignableButtons and Interface Builder will render these styles immediately.nnCommon button styles, such as corner radius, are also made available in Interface Builder",
    "homepage": "",
    "license": {
        "type": "MIT"
    "authors": {
        "Fraser Scott-Morrison": "[email protected]"
    "platforms": {
        "ios": "10.0"
    "swift_version": "4.2",
    "source": {
        "git": "",
        "tag": "1.9"
    "source_files": "Sources/*.swift",
    "frameworks": "UIKit",
    "requires_arc": true

Pin It on Pinterest

Share This