Rungsmith
Early access
Components

Button

A reusable action button with five variants, four sizes and native Perspective message handling.

FreePerspective 8.3

9 of 9 examples

Native capture

Default button

Open this example
Native capture

Secondary button

Open this example
Native capture

Outline button

Open this example
Native capture

Ghost button

Open this example
Native capture

Destructive button

Open this example
Native capture

Small button

Open this example
Native capture

Large button

Open this example
Native capture

Icon button

Open this example
Native capture

Disabled button

Open this example

Interactive preview

Try the component overview in its native Perspective session. Individual examples above are captures of the native views.

Perspective capture
Button — captured in Ignition Perspective

Usage

After importing the native resource, add an Embedded View to your host. This example uses the component's registered defaults.

Embedded View · Perspective JSON
{
  "type": "ia.display.view",
  "props": {
    "path": "Primitives/Button",
    "params": {
      "label": "Button",
      "variant": "default",
      "size": "default",
      "disabled": false,
      "iconPath": "",
      "iconOnly": false,
      "onClickMessage": "",
      "hover": true
    }
  }
}

Installation

Local preview · v0.1.0 · Ignition 8.3.

Download the component ZIP above. In Designer, choose File > Import and select the archive. Keep the included view and style-class paths. Then extract stylesheet-snippet.css and append it to your project's Perspective stylesheet; the ZIP does not replace your stylesheet. Add an Embedded View with path Primitives/Button. See README.md in the archive for setup details.

The archive has passed resource and integrity checks. Manual import of this ZIP in Designer remains to be verified.

Read native source through the MCP →

API reference

ParameterTypeDefault
labelNative view input: label.string"Button"
variantNative view input: variant.default | secondary | outline | ghost | destructive"default"
sizeNative view input: size.sm | default | lg | icon"default"
disabledNative view input: disabled.booleanfalse
iconPathNative view input: iconPath.string""
iconOnlyNative view input: iconOnly.booleanfalse
onClickMessagePerspective message type emitted by the button. Add the matching handler in the host view; no handler is installed automatically.string""
hoverNative view input: hover.booleantrue
Bindings and responsive behavior

Bindings: expression, tag.

Use an Embedded View with path Primitives/Button; constrain it using the host Flex container.

Snapshot is not a responsive acceptance claim; verify at desktop and tablet widths.