Button - Flowboard

What it is

Button is the main action component in Flowboard.

What it’s best for

Use it when the user should take one clear next step.

When to use it

Continue through onboarding
Start a free trial
Upgrade to a paid plan
Open the next screen in a guided flow

When not to use it

Do not place several equally strong buttons on the same screen.
Do not use a button style so subtle that users miss the next step.

How to add it in the dashboard

Open the screen in the dashboard.
Add Button from the Components panel.
Select the button on the canvas.
In the properties panel, set the label, action, size, and appearance.
Compare it against the rest of the screen to confirm it is the main focal point.

Key parameters

Parameter	What it changes	When to adjust it
Label	Sets the action text	Use action-oriented wording that makes the next step obvious
Action	Defines what happens after the tap	Adjust it whenever the screen’s path changes
Width mode	Controls whether the button fills space, fits content, or uses a fixed width	Use fill for strong primary actions and fit for lighter secondary actions
Height mode	Controls the button height behavior	Use it when the button should feel larger or more compact
Background	Changes the button fill, including solid or gradient looks	Use it to create clear hierarchy
Text color	Controls label contrast and readability	Adjust it whenever the fill changes
Corner radius	Changes how sharp or soft the button feels	Use it to match the brand style
Border	Adds outline treatment	Use it for a secondary action style
Effects	Adds depth such as shadow	Use it lightly when the CTA needs more separation
Margin	Adds space around the button	Use it to keep the CTA visually isolated and easy to notice

Example use cases

A “Continue” button at the end of each onboarding page
A “Start free trial” button on a pricing screen
An “Upgrade now” button under a premium feature comparison

Best practices

Keep one clear primary button on each screen.
Start the label with a verb whenever possible.
Make the button easy to spot without overwhelming the rest of the layout.
If you need a secondary action, make it visually quieter than the primary one.

Common mistakes

Showing multiple primary actions with the same visual weight
Using vague labels such as “Submit” when the real outcome is more specific
Styling the button so heavily that it feels disconnected from the product

Lottie Text Input