ActionButton

ActionButton(props): Element | null

Defined in: packages/ui/src/components/action-button.tsx:53

Permission-aware button that submits a @cfast/actions action.

Accepts an ActionHookResult from useActions() and renders a button via the UI plugin’s button slot. The button’s visibility and disabled state are controlled by the action’s permission status. Extra props are forwarded to the underlying button component.

• whenForbidden="hide" — hidden when not permitted
• whenForbidden="disable" — shown but disabled when not permitted (default)
• whenForbidden="show" — shown and clickable regardless of permission

When href is provided, renders a permission-gated <a> link instead of a form-submitting button. The link is only rendered when the action is permitted (respects whenForbidden).

When input is provided, submits a form with those values as hidden fields via a fetcher, eliminating manual <Form> + <input type="hidden">. This works with both useActions() results (where action.submit() is already wired) and useCfastLoader() results (where action.submit() is a no-op and the fetcher handles submission).

Parameters

props

ActionButtonProps

See ActionButtonProps.

Returns

Element | null

Examples

<ActionButton action={publishPost} confirmation="Publish this post?">
  Publish
</ActionButton>

<ActionButton action={documents.canAdd()} href="/documents/new">
  New Document
</ActionButton>

<ActionButton
  action={recipe.canDelete()}
  input={{ _action: "deleteRecipe", id: recipe.id }}
>
  Delete
</ActionButton>