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