Button Module

The Button module in PAP allows you to add interactive and fully customisable buttons to your app. Buttons can link users to pages, trigger actions, or simply enhance the interface with strong visual design. Whether you're creating navigation elements or interactive call-to-actions, this module gives you full control over appearance and behaviour.

Written By Dorsa Arfa

Last updated 9 months ago

Accessing the Button Module

  1. Open an app in PAP.

  2. Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.

  3. In the left-side New Items pane, locate the Button module.

  4. Drag it onto your app canvas. Once placed, click it to open the Button Properties Pane.

Button Properties and Settings

The properties pane provides full control over how your button looks and functions.

1. Action

Define what happens when the button is clicked:

  • Navigate to Page: Directs the user to a selected page in your app.

  • Go Back: Returns the user to the previous screen.

  • URL: Opens an external link.

To set an action:

  • Open the Button Properties Pane

  • Go to the Action section

  • Choose from the options above

2. Typography

Control the text on the button:

  • Preset: Apply a predefined style (Paragraphs, Titles, Subtitles)

  • Customise: Choose your font, weight, size, line spacing, and letter spacing

  • Colour: Use the colour picker or enter a HEX code

  • Alignment: Left, Centre, Right, or Justify

  • Case: Sentence case, UPPERCASE, lowercase, or None

  • Type: Choose between Single Line or Multi Line

  • Your Text: Input the label that appears on the button

3. Button Colour

Define the button’s background fill:

  • None: Transparent background

  • Solid: Select or customise a solid fill colour

To apply:

  • Click the current colour box in the properties panel

  • Select or define your new fill colour

4. Button Modes

Choose how your button content is displayed:

  • Text: Displays only text

  • Text and Icon: Includes both text and a selectable icon

  • Icon: Shows only an icon

You can select an icon from the library and customise its colour from within the same property pane.

5. Button Collection

Use pre-designed styles that match common app needs:

  • Fill Button: Solid background

  • Text Button: Text only, no fill

  • Icon Button: Icon only

  • Link Button: Styled like a hyperlink

  • Outline Button: Bordered, no fill

To access:

  • Click the small arrow in the bottom-right corner of the Button module

6. Button Border

Style the border around the button:

  • Choose from None, Solid, or Dashed

  • Adjust size, colour, and corner radius

Design Notes

  • The module uses Auto sizing by default. Custom values can be applied manually.

  • Every element—from colour and spacing to actions and text—can be edited from the left properties pane.

  • All pre-designed buttons are fully customisable once added to your app.

Use Cases

  • Create engaging call-to-action buttons with bold typography and colours

  • Use icon-only buttons for settings or menus

  • Link to internal pages or external sites

  • Adjust visibility dynamically based on app state or user role