Button

Buttons are core components used to trigger actions in a Lowgile screen.

They are typically used to submit data, approve or reject tasks, or perform other user-driven actions.

• Path: Components → CORE → Button

When to use buttons

Use buttons when you need to:

• Trigger a process action (e.g. Submit, Approve, Reject)
• Add or remove items from a screen
• Navigate or execute logic
• Confirm user input

Create a button

In the Lowgile screen editor:

1. Open the Components toolbar.
2. Go to the CORE section of the Components toolbar section.
3. Drag the Button component onto the screen.
4. Position it where the action should be available.
5. Configure the button properties (label, icon, and event).

💡

Insight

Buttons are usually placed at the end of a form or section where a user completes an action.

Button configuration tabs

When configuring a button, you will work across four tabs:

Tab	Purpose
Properties	Defines the button label, icons, and basic behavior.
Appearance	Controls visual styling such as color and icon placement.
Styles	Applies additional styling options such as spacing or layout behavior.
Events	Defines what happens when the button is clicked (event handlers).

Button colors

On the Appearance tab, you can choose from four predefined button color styles:

Color	Purpose
Basic	Neutral button for low-emphasis actions.
Primary	High-emphasis action (for example: Approve or Submit).
Accent	Secondary emphasis for supporting actions.
Warn	Destructive or negative actions (for example: Reject or Delete).

When to use which color

• Use Primary for the main action on the screen
• Use Warn for destructive or negative actions
• Use Accent for secondary actions that still need visibility
• Use Basic for low-priority or neutral actions

✅

Tip

Use Primary and Warn sparingly to maintain clear visual hierarchy between actions.

Event handling

A button requires an event handler to define what happens when the user clicks it.

Typical uses include:

• Submitting a form
• Triggering a process action
• Calling a handler or function

Without an event handler, a button will not perform any action.

Naming conventions

Use clear, action-oriented labels:

• Submit
• Approve
• Reject
• Add item

Avoid vague labels like OK or Do it.

🧠

Key Lesson

Buttons represent user intent. Use clear labels and consistent colors to guide user actions.