BrandButton

I aimed for simplicity and the ease of use across UIKit and SwiftUI, at the same time I wanted to make the button fully customizable. I also was targeting the button configurations to include and match the properties and tokens of the Design System in Figma.

Design System

Included is a compact design system that lists Color Tokens and the default button font.

The primary benefit of the design system lies in its ability to customize colors and fonts in a centralized place.

struct DS {
    enum Colors {
        enum Button {
            static let defaultGreen = UIColor(named: "trvGreen700")!
            static let highlightedGreen = UIColor(named: "trvGreen900")!
            static let backgroundGreen = UIColor(named: "trvGreen100")!
...
}

Feature List

• Easy to customize Variant, Style, and Size in a few lines of code.
• Available animation for state transition.
• Easy to customize and use in UIKit and SwiftUI.

Configurations

Variant

/// The variant of the button. 
/// It's default value is `primary`.
var variant: Variant = .primary

Style

/// The style of the button. 
/// It's default value is `mainGreen`.
var  style: Style = .mainGreen

Size

/// The size of the button.
/// It's default value is `regular` and could be `medium`
var  size: ButtonSize = .regular

FullWidth

/// Bool value Indicates whether the button should have full width.
/// It's default value is `false`. When`ture` the button should fill the screen bounds.
var  fullWidth: Bool = false

LeadingIcon

/// An optional UIImage.
/// When set the button should have a visible `imagePlacement` direction to `. leading`.
var  leadingIcon: UIImage?

TrailingIcon

/// An optional UIImage.
/// When set the button should have a visible `imagePlacement` direction to `. trailing`.
var  trailingIcon: UIImage?

Usage

UIKit

let customButton = BrandButton()
customButton.variant = .primary
customButton.style = .mainGreen
customButton.size = .regular
customButton.setTitle("Primary Default", for: .normal)
view.addSubview(customButton)

SwiftUI

BrandButtonView(title: "Primary Default",
                action: { },
                variant: .primary,
                style: .mainGreen,
                size: .regular)