Skip to content
Buttonize.io Logo Buttonize.io Logo Buttonize Docs

Components

Components are the visible parts of Buttonize apps.

There are two types of components

  • Display - read-only components displaying text and data. For example Display.heading.
  • Input - read-write components with the possibility to hook up Actions to them. For example Input.text.

Example

lib/MyStack.ts
6 collapsed lines
import { Action, Buttonize, ButtonizeApp, Display, Input } from 'buttonize/cdk'


Buttonize.init(this, {
  apiKey: 'btnz_mybuttonizekey1234567'
})


new ButtonizeApp(this, 'MyButtonizeApp')
  .page('MyButtonizePage', {
    body: [
      Display.heading('Hello {{name}}, this is my page'),
      Input.text({
        id: 'name',
        label: 'What is your name?',
        placeholder: 'Joe'
      })
    ]
  })

Preview

app.buttonize.io

Available components

Display.code Display.code renders code with syntax highlighting.
Display.grid Display.grid can be used to precisely determine the layout of your Buttonize components.
Display.heading Display.heading displays bold heading with large font size.
Display.image Display.image displays an image.
Display.json Display.json displays JSON data.
Display.markdown Display.markdown displays Markdown content.
Display.section Display.section displays a collapsible section.
Display.text Display.text shows plain text.
Display.video Display.video displays a video.
Input.button Input.button displays a button with which a user can trigger an action.
Input.number Input.number displays a number input whose value can be later used in the app.
Input.select Input.select displays a input field.
Input.text Input.text displays a text input whose value can be later used in the app.
Input.toggle Input.toggle displays a checkbox.