Files
webstudio/docs/university/core-components/button.md
Oleg Isonen 99371187dc docs: Move product documentation into Builder (#5987)
## 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
2026-08-03 17:55:50 +02:00

2.4 KiB
Raw Permalink Blame History

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

  1. Drag a Button component from Components > Forms onto your canvas
  2. Edit the button text
  3. Style using the Style Panel
  4. 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
  • Form – Form containers for submissions
  • Link – Navigation links
  • Input – Text input fields