You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.

General

Component Palette Icon:



Description

The Button component is a versatile component, that is used to initiate some sort of action in response to being pressed. It can be used for showing status, as well. For example, you can configure buttons to be active or inactive, change color, text or any other property, and you can alter these configurations in response to conditions in your project. Button components support icons as well. For an example, see Example 2 below.

To get buttons to do things, you configure one or more Actions that occur following an Event. For instance, you might call a Script action on the onActionPerformed component event, which triggers when the button is pressed. 

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
text

Text to display on a button.

value: string
textStyle

The following feature is new in Ignition version 8.0.4
Click here to check out the other new features

Style properties that are directly applied to the text within the Button component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
object
primaryToggle between default primary and secondary button style. Default is true.value: boolean
enabled

Enables button interaction. Default is true.

value: boolean
image

An optional image embedded in the button.

NameDescriptionProperty Type
source

The image source URL. It could be a URL to an image on the internet or Gateway, or even an embedded image.

For an image already in the Image Management console, use /system/images/{path to your image}. For example:

/system/images/Builtin/icons/24/lightbulb_on.png
value: string
icon

An image path used to augment the writingState of the component by placing an image next to it.

Name

Description

Property Type

pathShorthand path to icon source, in format: library/IconName. The materials icon library is a the primary source for icons in Ignition, see https://fonts.google.com/icons?selected=Material+Icons.value: string
colorColor of the icon. Can also assign color in "fill" of the style property. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
object
widthWidth of the button image in pixels.value: numeric

height

Height of the button image in pixels.value: numeric
position

Horizontal position of the image within the button relative to the text: left, center, right, top, or bottom.

value: string
styleSets a style for the image. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. object
object

align

The following feature is new in Ignition version 8.0.4
Click here to check out the other new features

Aligns the text and image (if present) along the cross axis. Vertical if imagePosition is top or bottom, otherwise it's horizontal. Options are start, center, end, and stretch. Default is center.

value: string

justify

The following feature is new in Ignition version 8.0.4
Click here to check out the other new features

Justifies the text and image (if present) along the main axis. Horizontal if the imagePosition is top or bottom, otherwise it's vertical. Options are start, center, end, space-around, space-between, and space-evenly. Default is center.

value: string

style

Sets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. 

object

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples
Example 1

PropertyValue
props.textComplete
props.image.source/system/images/Builtin/icons/48/check2.png
props.image.positionright
props.textStyle.color#000000
props.justifyspace-evenly
props.style.backgroundColor#D5D5D5
props.style.borderStylesolid
props.style.borderColor#000000
props.style.borderWidth2px
Example 2

PropertyValue
props.textSave
props.textStyle.color#00AC00
props.image.source/system/images/Builtin/icons/48/disk_green.png
props.image.positiontop
props.image.width40
props.image.height40
props.alignend
props.justifyspace-between
props.style.backgroundColor#FFFFFF
props.style.borderStyleinset
props.style.borderWidth5px
props.style.borderColor#00AC00


  • No labels