Documentation Index
Fetch the complete documentation index at: https://docs.flow-board.co/llms.txt
Use this file to discover all available pages before exploring further.
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