Skip to main content

Button

Element type: Dictionary

This component allows you to display a button to trigger actions you specify.

info

While the Button component can be displayed in the FREE version, you will need an Octory PRO license to trigger actions with the OnClick key.

Keys

NameTypePossible valuesRequired
TypeStringButtonRequired
StyleStringSimple, InfoRequired
TextString-
ColorDictionary (Color)-
AlignmentStringLeft, Center, Right
OnClickArray (Actions)-
TriggerString-
Popover PRODictionary (Popover)-
MarginsDictionary (Margins)-
BorderDictionary (Border)-
Condition PRODictionary (Condition)-

Detail

Type Required

Type: String
Explanation: The type of the component which has to be Button.

Style Required

Type: String
Possible values: Simple, Info
Explanation: Choose the way the button appears. Simple will display the text you provide. Info will display an info icon with no background.

Text

Type: String
Explanation: Text displayed on the button with the Simple style key.

Color

Type: Dictionary (Color)
Explanation: The text color of the button, or the color of the info icon.

Alignment

Type: String
Possible values: Left, Center, Right
Default: Left
Explanation: Align the button in its container.

OnClick

Type: Array (Actions)
Explanation: Actions to trigger when the button is clicked.

Trigger

Type: String
Availability: 2.1.0+
Explanation: Send a trigger event to execute an ActionSet that registered a custom trigger with this name. See Triggers.

Popover PRO

Type: Dictionary (Popover)
Explanation: A popover markdown text will be displayed when the user clicks the button.

Margins

Type: Dictionary (Margins)
Explanation: Add padding to the component's sides.

Border

Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.

Condition PRO

Type: Dictionary (Condition)
Explanation: Allows to hide or show the component using a boolean expression.

Example

Button displaying “Send” with a SaveInputs action triggered when the end user clicks.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- ... -->
<key>Slides</key>
<array>
<dict>
<key>Containers</key>
<array>
<dict>
<key>Components</key>
<array>
<dict>
<key>Type</key>
<string>Button</string>
<key>Text</key>
<string>Log</string>
<key>OnClick</key>
<dict>
<key>Actions</key>
<array>
<dict>
<key>Type</key>
<string>SaveInputs</string>
</dict>
</array>
</dict>
</dict>
</array>
</dict>
</array>
</dict>
</array>
<!-- ... -->
</dict>
</plist>

Button with an Info style (ℹ️) which displays a popover when clicked. The markdown popover has a header and a simple text line. It uses the Avenir font. The color of the info image is set as the Secondary color defined in the ColorStyles section.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- ... -->
<key>Slides</key>
<array>
<dict>
<key>Containers</key>
<array>
<dict>
<key>Components</key>
<array>
<dict>
<key>Type</key>
<string>Button</string>
<key>Style</key>
<string>Info</string>
<key>Color</key>
<dict>
<key>Style</key>
<string>Secondary</string>
</dict>
<key>Alignment</key>
<string>Right</string>
<key>Popover</key>
<dict>
<key>Text</key>
<string># Informative text
This is informative text</string>
<key>Edge</key>
<string>Bottom</string>
<key>Font</key>
<dict>
<key>Name</key>
<string>Avenir</string>
</dict>
</dict>
</dict>
</array>
</dict>
</array>
</dict>
</array>
<!-- ... -->
</dict>
</plist>