Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata
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.

 Click to see the image properties
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.

 Click here to expand...

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 classobject
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