TTBaseUIButton
CoreFeature-rich UIButton subclass with 7 style types, built-in loading indicator, skeleton loading, highlighted color state management, icon support (AwesomePro), and chainable API. All buttons automatically get shake animation on tap and fire through a clean closure-based onTouchHandler.
🎨 Button Types
public enum TYPE {
case NO_BG_COLOR // Transparent background
case DEFAULT // ViewConfig.buttonBgDef color (blue default)
case ICON // Icon-only button
case DISABLE // Dimmed, non-interactive
case BORDER // White bg + colored border
case WARRING // ViewConfig.buttonBgWar color (red/orange)
case DEFAULT_COLOR(color: UIColor, textColor: UIColor) // Custom colors
}
| Type | Background | Border | Use Case |
|---|---|---|---|
.DEFAULT | ViewConfig.buttonBgDef (blue) | None | Primary actions: submit, continue, login |
.WARRING | ViewConfig.buttonBgWar (red/orange) | None | Destructive: delete, remove, cancel |
.BORDER | White/clear | Colored border | Secondary actions, outline buttons |
.NO_BG_COLOR | Transparent | None | Text-only actions, navigation links |
.DISABLE | 50% opacity | None | Non-interactive state |
.ICON | Transparent | None | Image-only icon buttons |
.DEFAULT_COLOR(color:textColor:) | Custom color | None | Branding-specific buttons |
🚀 Usage
Basic Buttons
// Default blue button
let loginBtn = TTBaseUIButton(textString: "Sign In", type: .DEFAULT)
// Warning/danger button
let deleteBtn = TTBaseUIButton(textString: "Delete Account", type: .WARRING)
// Border outline button
let cancelBtn = TTBaseUIButton(textString: "Cancel", type: .BORDER)
// Custom color button
let customBtn = TTBaseUIButton(
textString: "Premium",
type: .DEFAULT_COLOR(color: .systemPurple, textColor: .white)
)
Touch Handler (closure-based)
let loginBtn = TTBaseUIButton(textString: "Sign In", type: .DEFAULT)
loginBtn.onTouchHandler = { button in
// Called when button is tapped
print("Button tapped: \(button.titleLabel?.text ?? "")")
button.onStartLoadingAnimation()
APIService.login { result in
button.onStopLoadingAnimation()
}
}
With Fixed Size
// Button with default width (147pt) and height (50pt from SizeConfig.H_BUTTON)
let fixedBtn = TTBaseUIButton(
textString: "Submit",
type: .DEFAULT,
isSetSize: true
)
// Button with only fixed height
let heightBtn = TTBaseUIButton(
textString: "Continue",
type: .DEFAULT,
isSetHeight: true
)
Loading Animation
let submitBtn = TTBaseUIButton(textString: "Submit", type: .DEFAULT)
submitBtn.onTouchHandler = { button in
// Show loading spinner, hide text, disable interaction
button.onStartLoadingAnimation()
APIService.submit { result in
// Re-enable button, show text, hide spinner
button.onStopLoadingAnimation()
}
}
Enable / Disable
// Disable button (dims to 50% opacity)
submitBtn.setNonEnable()
// Re-enable
submitBtn.setEnable()
// Enable after 5-second delay (prevents accidental double-tap)
submitBtn.setEnableWithDelay()
Button with Icon (AwesomePro)
let iconBtn = TTBaseUIButton(textString: "Settings", type: .DEFAULT)
iconBtn.setIconImage(
iconName: "fa-gear", // Font Awesome Pro name
color: .white,
padding: 8
)
Button Badge (notification dot)
// A button variant with a notification badge count overlay
let cartBtn = TTBaseUIButton(textString: "Cart", type: .DEFAULT)
// Use BaseButtonBadge for badge support
let badgeCartBtn = BaseButtonBadge()
badgeCartBtn.setBadgeCount(3)
📖 API Reference
| Method | Returns | Description |
|---|---|---|
setText(text:) | TTBaseUIButton | Set button title |
setTextColor(color:) | TTBaseUIButton | Set title color (+ highlighted state) |
setBgColor(color:) | TTBaseUIButton | Set background color |
setDefaultType() | TTBaseUIButton | Apply default style |
setWarringType() | TTBaseUIButton | Apply warning/danger style |
setBorderType() | TTBaseUIButton | Apply bordered outline style |
setNoBgType() | TTBaseUIButton | Make transparent button |
setEnable() | TTBaseUIButton | Enable interaction (full opacity) |
setNonEnable() | Void | Disable (50% opacity, non-interactive) |
setEnableWithDelay() | Void | Re-enable after 5s delay |
setImage(imageNameString:color:) | Void | Set image from asset name |
setIconImage(iconName:color:padding:) | Void | Set AwesomePro icon by name |
setHidden() / setNonHidden() | TTBaseUIButton | Toggle visibility (chainable) |
setTextAligment(alignment:) | TTBaseUIButton | Set horizontal text alignment |
resetBorderCorner() | TTBaseUIButton | Remove corner and clip mask |
onStartLoadingAnimation(withStyle:) | Void | Show UIActivityIndicatorView, hide title |
onStopLoadingAnimation() | Void | Hide indicator, restore text, re-enable |
onAddSkeletonMark() | Void | Show skeleton placeholder |
onRemoveSkeletonMark() | Void | Remove skeleton |
⚙️ Configuration
// Customize button default colors in AppDelegate
TTBaseUIKitConfig
.withDefaultConfig()
.withViewConfig(
TTBaseUIKitViewConfig(
buttonBgDef: UIColor(hex: "#0066CC"), // Default button bg
buttonBgWar: UIColor(hex: "#E53E3E"), // Warning button bg
buttonBgBorder: UIColor(hex: "#0066CC") // Border color
)
)
.start()
📐 Size Configuration
// Button height is controlled by SizeConfig.H_BUTTON
// Default: 50pt on all devices
TTBaseUIKitConfig
.withDefaultConfig()
.withSizeConfig(
TTBaseUIKitSizeConfig(
H_BUTTON: 52, // Button height
H_TEXTFIELD: 44 // TextField height
)
)
.start()
Pro Tip: Buttons automatically get a subtle
shakeAnimation() on tap for tactile feedback. The highlighted color is auto-calculated at 30% opacity from the title color. Both effects are configurable via StyleConfig.