## Summary - move the complete GitBook documentation tree and assets into Builder under `/docs` - generate the exhaustive MCP page from the local CLI source in the same change - publish GitBook from a release-gated `docs` branch containing the exact successfully released revision - run MCP documentation tests, typechecking, and stale-output checks with the existing generated-docs check - remove links to the Community Discussions repository ## Technical choices - Import the current documentation as a linear snapshot so the branch satisfies Builder's required-linear-history protection. - Keep the Markdown wrapper separate from the TypeScript generator at `scripts/docs/mcp-page.md`. - Generate through `packages/cli/local.js` so CLI guidance and its documentation are reviewed together. - Let `check:generated-docs` reject CLI changes that leave the committed MCP page stale. - After both GitHub release creation and package publication succeed, fast-forward the read-only `docs` branch to the immutable release tag commit. A divergent update fails instead of publishing a different revision. - Configure GitBook to publish `/docs` from the `docs` branch, not directly from `main`. - Exclude `/docs` from the repository-wide `oxfmt` scan so imported GitBook Markdown retains its established formatting; generator tests and stale-output checks still validate the MCP page. - Exclude `transcripts/` and GitHub Discussions from the migration. ## Todo - [x] Import documentation, navigation, includes, and assets under `/docs`. - [x] Generate the MCP page from the local CLI source. - [x] Move MCP generation and validation into Builder. - [x] Require MCP documentation updates alongside CLI changes. - [x] Publish released revisions through a read-only `docs` branch. - [x] Remove Community repository links from Builder and the migrated docs. - [x] Preserve and verify a final Community Git bundle locally. - [ ] Merge this pull request. - [ ] Let the next successful release create or advance the `docs` branch. - [ ] Repoint GitBook Git Sync to `webstudio-is/webstudio`, branch `docs`, root directory `/docs`. - [ ] Verify `docs.webstudio.is`, navigation, assets, anchors, and the MCP page in production. - [ ] Delete `webstudio-is/webstudio-community`. ## Verification - `pnpm check:generated-docs` - `pnpm lint` - `pnpm oxfmt --check` - `git diff --check origin/main...HEAD` - generator regression test demonstrated failing when the GitBook wrapper behavior was removed, then passing after restoration - no fixture inputs or outputs are affected ## Known limitation All documentation merged after the previous release waits for the next successful release before GitBook publishes it. This deliberately keeps the public MCP reference aligned with an installable CLI revision. Ref #5986
2.4 KiB
description
| description |
|---|
| Add clickable buttons to your Webstudio site with the Button component. |
🔘 Button
See MDN: <button>
The Button component creates clickable buttons for user interactions. Buttons trigger actions like submitting forms, opening dialogs, or navigating when combined with other components.
When to Use
Use Button for:
- Form submissions
- Triggering actions (open dialog, toggle, etc.)
- Call-to-action elements
- Interactive controls
{% hint style="warning" %} Buttons are for actions, not navigation. For navigation links, use the Link component instead. If you need a link styled as a button, style the Link component accordingly. {% endhint %}
How to Use
- Drag a Button component from Components > Forms onto your canvas
- Edit the button text
- Style using the Style Panel
- Place inside a Form for submissions, or use HTML Embed scripts for custom interactivity
Properties
Some commonly used properties (see the Settings panel for all available options):
| Property | Description |
|---|---|
| type | submit (form submission), reset (clear form), or button (general use) |
| disabled | Prevents interaction when true |
| name | Name for form submission |
| value | Value for form submission |
Button Types
Submit Button
Submits the parent form when clicked. Use inside Form or Webhook Form.
Reset Button
Clears all form fields to their default values.
Button (Default)
General purpose button for non-form actions. Use with component interactions like opening dialogs.
Styling States
Some common states (you can also create custom states):
- Default - Normal appearance
- Hover (
:hover) - Mouse is over the button - Focus (
:focus-visible) - Keyboard focused - Active (
:active) - Being pressed - Disabled (
:disabled) - Cannot be clicked