> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/screens-and-components/type-of-components/button-component.md).

# Button component

Canonical page for **button click actions**. Form submit is a different system — that lives on [Form submit redirection](https://docs.notionapps.com/screens-and-components/form-submit-redirection-and-other-submit-actions). Cross-link, do not fork a third “actions” book.

## What this is / when to use it

A **Button** (`BUTTON`) is a component the user taps. It does **not** submit the form. It runs one click action:

| Action     | Enum         | What it does                                              |
| ---------- | ------------ | --------------------------------------------------------- |
| Open URL   | `OPEN_URL`   | Opens a link (http/https, or an in-app path you control). |
| Dial phone | `DIAL_PHONE` | Opens the device dialer with a number.                    |
| Open email | `OPEN_EMAIL` | Opens a mailto.                                           |
| Open SMS   | `OPEN_SMS`   | Opens a sms: draft.                                       |

Use a button when the user should leave the current context without writing the form.

Use **form `on_submit`** when the user should save the row and then change data, go to a screen, or redirect. Those subtypes are `change_data`, `go_to_screen`, `redirect_url`.

When **not** to use a button:

* “Save” / “Submit” — that is the form submit control.
* “Start approval” — attach a workflow to submit or to a workflow button in Automation, not `OPEN_URL`.
* “Pick related rows” — use a reference input with `SELECTION`.

## Before you start

1. You are on Details, Content, or a form where a secondary action makes sense (Cancel, Call client, Open contract).
2. The URL / phone / email / SMS value is either a literal or bound to a property (Show URL vs Button — prefer Button when you want a labeled control).

## Build it

1. Add **Button**.
2. Set the label (“Call client”, “Open invoice”).
3. Set color style `DARK` or `LIGHT`.
4. Set **On click** to one of `OPEN_URL`, `DIAL_PHONE`, `OPEN_EMAIL`, `OPEN_SMS`.
5. Bind the value (literal or property).
6. Set visibility if only some users should see it.
7. Publish and tap the button on a phone and on desktop.

## Every control

| Control                    | Options                                               | What it does                 |
| -------------------------- | ----------------------------------------------------- | ---------------------------- |
| Label                      | Text                                                  | Button text.                 |
| Color                      | `DARK` / `LIGHT`                                      | Visual style.                |
| On click                   | `OPEN_URL` / `DIAL_PHONE` / `OPEN_EMAIL` / `OPEN_SMS` | Click action.                |
| URL / phone / email / body | Literal or field                                      | Payload for the action.      |
| Visibility                 | Shared visibility enums                               | Hide for some rows or users. |

Screen-level actions (create/update/delete/bulk) are not button components. They are [Screen Actions](https://docs.notionapps.com/screens-and-components/customize-a-screen/screen-actions).

## What users see

A tappable control. It does not validate the form and does not write Notion. If the device cannot dial (desktop without a tel handler), the browser shows its default failure.

## Limits and plans

* Buttons do not start Workflow Foundation by themselves. Use a form submit trigger or a workflow **button\_clicked** attachment when the workflow builder offers it — that is an Automation binding, not `ButtonOnClickAction`.
* `OPEN_URL` to another screen’s public URL is brittle. Prefer `go_to_screen` on submit, or a hidden-nav screen opened from Screen Actions.
* SMS and dial need a real device capability.

## Example

Details of a vendor: Button **Call** = `DIAL_PHONE` on Phone, Button **Email** = `OPEN_EMAIL` on Email, Button **Portal** = `OPEN_URL` on the vendor’s URL property.

The form’s Submit still uses `on_submit` → `go_to_screen` → Thank you content page.

## Fix problems

| Symptom                         | Likely cause                           | What to do                                                   |
| ------------------------------- | -------------------------------------- | ------------------------------------------------------------ |
| Button “does nothing” on submit | You expected it to save                | Use the form submit button.                                  |
| Workflow does not run           | Click action is not a workflow trigger | Bind `button_clicked` in Automation, or use form\_submitted. |
| mailto empty                    | Email property empty                   | Bind a filled property or a literal.                         |

## Related

Form submit: [Form submit redirection](https://docs.notionapps.com/screens-and-components/form-submit-redirection-and-other-submit-actions). Screen record actions: [Screen Actions](https://docs.notionapps.com/screens-and-components/customize-a-screen/screen-actions). Workflow triggers: [Trigger catalog](https://docs.notionapps.com/automation/advanced-reference/trigger-catalog).