> ## 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.

# Button

> Use Button for the primary action that moves the user to the next step.

## 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

1. Open the screen in the dashboard.
2. Add **Button** from the **Components panel**.
3. Select the button on the **canvas**.
4. In the **properties panel**, set the label, action, size, and appearance.
5. 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

## Related components

* [Text](/components/text)
* [Icon](/components/icon)
* [Slider](/components/slider)
* [Stack](/components/stack)