Skip to main content
Version: 8.1

Perspective - Button

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.

New in 8.1.2

The DateTime Picker component has two pre-configured variants: Primary and Secondary.

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
textText to display on a button.

New in 8.1.26
Text can also be entered directly on the button by deep selecting the component, which enables inline editing. Changes are immediately reflected in the text property field.
value: string
textStyleStyle 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
enabledEnables button interaction. Default is true.value: boolean
imageAn optional image embedded in the button.
  • source: The image source URL. It could be a URL to an image on the internet or Gateway, or even an embedded image. Value is string. 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
  • icon: An image path used to augment the writingState of the component by placing an image next to it.
    • color: Color 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.
  • width: Width of the button image in pixels. Value is numeric.
  • height: Height of the button image in pixels. Value is numeric.
  • position: Horizontal position of the image within the button relative to the text: left, center, right, top, or bottom. Value is string.
  • style: Sets 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
    alignAligns 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
    justifyJustifies 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
    styleSets 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

    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