Skip to content
Titanium SDK
Version13.3.1

You are reading 13.3.1. See this page in 13.4.1.

Titanium.UI.iOS.ButtonConfiguration

proxyiPhoneiPadmacOSsince 13.0.0

Extends Titanium.Proxy

A configuration object for customizing the appearance and behavior of a button.

The ButtonConfiguration API provides a modern way to configure buttons on iOS with support for various styles, titles, subtitles, images, and padding. This API wraps the native UIButtonConfiguration introduced in iOS 15.0 and represents a modern alternative to the existing Button API while retaining backwards compatibility. In the future, this API may be merged into the root parameters of a button instead.

Use the Titanium.UI.iOS.createButtonConfiguration method to create a button configuration.

Button configurations support several predefined styles:

  • plain: A plain button style with minimal background
  • tinted: A tinted button style with a subtle background
  • filled: A filled button style with a solid background
  • gray: A gray button style
  • borderless: A borderless button style
  • bordered: A bordered button style with an outline
  • borderedTinted: A bordered button style with a tinted outline
  • borderedProminent: A bordered button style with a prominent appearance

Additional styles available on iOS 26.0+:

  • glass: A glass-like appearance
  • prominentGlass: A prominent glass-like appearance
  • clearGlass: A clear glass-like appearance
  • prominentClearGlass: A prominent clear glass-like appearance

Examples

Basic Button Configuration

const button = Ti.UI.createButton({
    configuration: Ti.UI.iOS.createButtonConfiguration({
        style: 'filled',
        title: 'Sign In',
        subtitle: 'with your account',
        backgroundColor: '#007AFF',
        color: 'white'
    })
});

Button with Image and Padding

const button = Ti.UI.createButton({
    configuration: Ti.UI.iOS.createButtonConfiguration({
        style: 'borderedTinted',
        title: 'Upload',
        image: 'upload-icon.png',
        imagePlacement: 'leading',
        imagePadding: 8,
        padding: {
            top: 12,
            left: 20,
            bottom: 12,
            right: 20
        }
    })
});

Prominent Button Style

const button = Ti.UI.createButton({
    configuration: Ti.UI.iOS.createButtonConfiguration({
        style: 'borderedProminent',
        title: 'Get Started',
        backgroundColor: '#34C759'
    })
});

Typography and Alignment

const button = Ti.UI.createButton({
    configuration: Ti.UI.iOS.createButtonConfiguration({
        style: 'filled',
        title: 'Continue',
        font: { fontSize: 18, fontWeight: 'semibold' },
        textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
    })
});

Highlighted Background Color

const button = Ti.UI.createButton({
    configuration: Ti.UI.iOS.createButtonConfiguration({
        style: 'filled',
        title: 'Tap Me',
        backgroundColor: '#007AFF',
        backgroundSelectedColor: '#005BBB' // shown while pressed
    })
});

Properties 17

apiName

Stringsince Android 3.2.0, iPhone 3.2.0, iPad 3.2.0, macOS 9.2.0read-only

Inherited from Titanium.Proxy

The name of the API that this proxy corresponds to.

Specify an attributed string for the button title.

Sets the configuration’s attributedTitle. If set, avoid also setting title, color, and font to prevent conflicting styles.

The background color of the button.

Sets the base background color for the button. This color may be modified by the system based on the button state and configuration style.

Background color to use while the button is highlighted (pressed).

When this configuration is assigned to a Titanium.UI.Button and both backgroundColor and backgroundSelectedColor are provided, the button will automatically swap the configuration’s background to backgroundSelectedColor when highlighted and restore the base color when not highlighted.

This mirrors the traditional backgroundSelectedColor behavior on views when used with modern button configurations.

bubbleParent

Booleansince Android 3.0.0, iPhone 3.0.0, iPad 3.0.0, macOS 9.2.0

Inherited from Titanium.Proxy

Indicates if the proxy will bubble an event to its parent.

Default: true

The foreground color of the button's content.

Sets the base foreground color for the button's title and subtitle text. This color may be modified by the system based on the button state.

Font to use for the button title.

Sets the font applied to the configuration’s title via the underlying UIButtonConfiguration.titleTextAttributesTransformer.

When using attributedString, prefer setting font in the attributed content instead.

The image to display on the button.

The image to display alongside the button's title. Use the imagePlacement property to control where the image appears relative to the title.

The spacing between the image and title.

The amount of spacing in points between the button's image and its title text.

Default: 0

The placement of the image relative to the title.

Controls where the button's image appears relative to its title text.

Valid string values are:

  • "leading": Place the image before the title text
  • "trailing": Place the image after the title text
  • "top": Place the image above the title text
  • "bottom": Place the image below the title text

Default: leading

loading

Booleansince 13.1.0

Whether or not a loading indicator should be shown

A Boolean value that determines whether the button displays an activity indicator instead of an image.

The padding around the button's content.

An object with top, left, bottom, and right properties to specify the content insets for the button.

style

String

The style of button configuration to create.

Sets the base configuration style for the button. This property should be set first as it determines the initial configuration that other properties will modify.

Valid string values are:

  • "plain": A plain button style with minimal background
  • "tinted": A tinted button style with a subtle background
  • "filled": A filled button style with a solid background
  • "gray": A gray button style
  • "borderless": A borderless button style
  • "bordered": A bordered button style with an outline
  • "borderedTinted": A bordered button style with a tinted outline
  • "borderedProminent": A bordered button style with a prominent appearance
  • "glass": A glass-like appearance (iOS 26.0+)
  • "prominentGlass": A prominent glass-like appearance (iOS 26.0+)
  • "clearGlass": A clear glass-like appearance (iOS 26.0+)
  • "prominentClearGlass": A prominent clear glass-like appearance (iOS 26.0+)

subtitle

String

The subtitle text to display below the title.

title

String

The title text to display on the button.

The spacing between the title and subtitle.

The amount of spacing in points between the button's title and subtitle text.

Default: 0

Methods 4

Inherited from Titanium.Proxy

Adds the specified callback as an event listener for the named event.

Parameters
ParametersTypeDescription
nameString

Name of the event.

callbackCallback<Titanium.Event>

Callback function to invoke when the event is fired.

4 fields
bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

source Object

Source object that fired the event.

type String

Name of the event fired.

Inherited from Titanium.Proxy

Fires a synthesized event to any registered listeners.

Parameters
ParametersTypeDescription
nameString

Name of the event.

event?Dictionary

A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.

Inherited from Titanium.Proxy

Removes the specified callback as an event listener for the named event.

Parameters
ParametersTypeDescription
nameString

Name of the event.

callbackCallback<Titanium.Event>

Callback function to remove. Must be the same function passed to addEventListener.

4 fields
bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

source Object

Source object that fired the event.

type String

Name of the event fired.