Custom Brand Button

A custom Brand Button with multiple varients as follows:

• Green, Primary
• Green, Secondary
• Blue, Primary
• Blue, Secondary
• Disabled (Green or Blue), Primary
• Disabled (Green or Blue), Secondary

Variations

ScreenShot

Variations

The screenshot below showcasess the different variations and states of the custom brand button.

Preview

Disabled State

Disabled states for Primary and Secondary

Primary Selected

Secondary Selected

Installation

Simply drag and drop the "BrandButton" folder in your project and start using the custom control.

Future scope

The custom control and its design system can be added to a XCFramework and distributed internally through cocoapods or SPM, depending upon the team's requirements.

Usage/Examples

let primaryGreenBtn: BrandButton = BrandButton.init(type: .primaryGreen)
let primaryBlueBtn: BrandButton = BrandButton.init(type: .primaryBlue)
    
let primaryBlueLeftIconBtn: BrandButton = BrandButton.init(type: .primaryBlue, icon: "stop.fill", leadingIcon: true)
let primaryGreenRightIconBtn: BrandButton = BrandButton.init(type: .primaryGreen, icon: "stop.fill", leadingIcon: false)

Architecture

The BrandButton inhertits from a UIButton to leverage the existing functionality provided by the UIButton and add customizations on top of it. You can modify the size, background color, fonts just like any other button.

There is a standard Size object available to set the size of the button as

.regular, .medium, .fullWidth

The Custom control uses a micro design system with colors mapped to the design. Changing the color in this system is as easy as modifying the Colors in the Asset Catalog. We can build a similar one for Fonts to define standard Title, SubTitles. Description to bring further standerdizations.

Author

Abhishek Srivastava