Input.button

Renders an interactable button.

The button can be used to trigger a lambda, change pages within a Buttonize app, or interact with some other AWS services via Buttonize Actions.

Input.button(props)

Usage - changing the page

4 collapsed lines
import { Action, ButtonizeApp, Input } from 'buttonize/cdk'

new ButtonizeApp(this, 'DemoApp')
  .page('DemoPage', {
    body: [
      Input.button({
        label: 'Next Page',
        onClick: Action.buttonize.app.changePage('SecondPage')
      })
    ]
  })

Preview

The buttons are not interactable in this example.

app.buttonize.io

Usage - invoking a lambda

5 collapsed lines
import { Action, ButtonizeApp, Input } from 'buttonize/cdk'
import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs'

new ButtonizeApp(this, 'DemoApp')
  .page('DemoPage', {
    body: [
      Input.button({
        label: 'Invoke Lambda',
        onClick: Action.aws.lambda.invoke(
          new NodejsFunction(this, 'ExampleLambda', {
            entry: 'exampleLambda.ts'
          })
        )
      })
    ]
  })

Preview

The buttons are not interactable in this example.

app.buttonize.io

Colors

In order to control color of a button, kind and intent props can be used.

app.buttonize.io

Props

label

Required

string

The text to display inside the button.

onClick

Required

function

The Action to call when the user clicks the button.

kind

Optional

’primary’ | ‘secondary’ | ‘tertiary’

A variant of the button. Default is primary.

intent

Optional

’default’ | ‘positive’ | ‘negative’

An intent of the button. Default is default.

disabled

Optional

boolean

Whether or not the button can be interacted with. Default is false.

onClickFinished

Optional

function

A callback that will be invoked when the onClick function is finished executing.

This is also often used to redirect to the next page via Action.buttonize.app.changePage(...).

spacingTop

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give above the component.

spacingBottom

Optional

’sm’ | ‘md’ | ‘lg’ | ‘xl’

The amount of space to give below the component.

width

Optional

1 | 2 | 3 | 4

The width of the component.