Button

class: SJUIButton inherits: UIButton

Platform Support

• ✅ UIKit: Full support (All attributes available)
• ✅ SwiftUI: Full support (All attributes available through DynamicComponent)
  • 7.0.0-beta: Added frame and enabled property support with data binding
  • 7.0.0-beta: Fixed background color to fill entire button area
  • 7.0.0-beta: Improved wrapContent width behavior to match Static mode
• ✅ Jetpack Compose: Full support (Maps to Button composable)
• ✅ Android XML: Maps to com.kotlinjsonui.views.KjuiButton (custom button with font support)

Attributes for Button

attribute name	UIKit	SwiftUI	Compose	XML	type in json	details	remarks
text	✅	✅	✅	✅	string	NSLocalizedString(text, comment:"") will be set to attributedText
font	✅	✅	⚠️	✅	string	Font name for button	Compose uses fontWeight; XML: app:kjui_font_name
fontSize	✅	✅	✅	✅	float	Font size for button	XML: android:textSize (sp)
fontColor	✅	✅	✅	✅	string	NSAttributedStringKey.foregroundColor	XML: android:textColor
tapBackground	✅	✅	❌	✅	string	Background color when tapped	7.0.0-beta: SwiftUI support; XML: selector drawable
hilightColor	✅	✅	⚠️	❌	string	fontColor when highlighted	Compose: InteractionSource
disabledFontColor	✅	✅	✅	✅	string	fontColor when disabled	SwiftUI: StateAwareButton; XML: selector drawable
disabledBackground	✅	✅	✅	✅	string	backgroundColor when disabled	SwiftUI: StateAwareButton; XML: selector drawable
enabled	✅	✅	✅	✅	boolean/string	view.isEnabled. Can be boolean or @{variableName}	7.0.0-beta: Data binding; XML: android:enabled
frame	✅	✅	✅	❌	dictionary	Direct frame configuration with width and height	7.0.0-beta: New attribute
image	✅	❌	❌	✅	string	Background image for the button	UIKit only; XML: android:background
config	✅	❌	❌	❌	dictionary	UIButton.Configuration (iOS 15+)	UIKit specific
onclick	✅	✅	✅	✅	string	Selector-based event handler	See Event Handling; XML: android:onClick
onclick	✅	✅	❌	❌	array	Multiple event types with selectors	UIKit specific events

Properties for Button

Static Properties

open class var viewClass: SJUIButton.Type

This property will be used to decide which class to instantiate with the createFromJSON method. You should define the view's class on this property when you create classes that inherit from SJUIButton.

Instance Properties

public var defaultFontColor: UIColor?

Default font color for normal state. Used as the base text color when no specific color is set.

public var disabledBackgroundColor: UIColor?

Background color applied when the button is disabled (isEnabled = false).

public var disabledFontColor: UIColor?

Text color applied when the button is disabled (isEnabled = false).

Override Properties

override var isEnabled: Bool

Enabled state of the button. When set to false, applies disabled colors automatically. Custom setter that manages color transitions between enabled and disabled states.

Functions for Button

Static Methods

public class func createFromJSON(attr: JSON, target: Any, views: inout [String: UIView]) -> SJUIButton

Factory method called when the button is created from a JSON file. Override this method when you create classes that inherit from SJUIButton class.

Override Methods

override func setTitleColor(_ color: UIColor?, for state: UIControl.State)

Custom title color setting that integrates with the disabled color management system. Automatically handles color transitions based on button state.

Inherited Methods

SJUIButton inherits all methods from UIButton and SJUIView, including:

• Touch handling methods from SJUIView
• Event handling capabilities
• Constraint and layout management
• Gesture recognition support

Event Handling

Buttons support comprehensive event handling through the onclick attribute:

• Single string selector for touchUpInside events
• JSON array format for multiple event types and selectors
• Integration with UIControl.Event system
• Support for all standard button events (touchDown, touchUpInside, etc.)

Usage Examples (7.0.0-beta)

Button with Frame Support

{
  "type": "Button",
  "id": "submit_button",
  "text": "Submit",
  "frame": {
    "width": 200,
    "height": 50
  },
  "background": "#007AFF",
  "fontColor": "#FFFFFF",
  "cornerRadius": 8
}

Button with Data Binding for Enabled State

{
  "data": [
    {
      "name": "isFormValid",
      "class": "Bool",
      "defaultValue": false
    }
  ],
  "child": [
    {
      "type": "Button",
      "id": "save_button",
      "text": "Save",
      "enabled": "@{isFormValid}",
      "disabledBackground": "#CCCCCC",
      "disabledFontColor": "#999999"
    }
  ]
}

Button with Style and wrapContent

{
  "type": "Button",
  "id": "styled_button",
  "style": "primary_button",
  "text": "Get Started",
  "width": "wrapContent",
  "onclick": "handleGetStarted"
}

Where Styles/primary_button.json contains:

{
  "background": "#007AFF",
  "fontColor": "#FFFFFF",
  "fontSize": 16,
  "cornerRadius": 8,
  "padding": [12, 24],
  "width": "wrapContent"
}