pages._explore-components-interaction-formactionbutton.title

pages._explore.sections.basic-usage.title

html

<FormActionButton
    identifier="example-form"
/>

typescript

<script setup lang="ts">
// The FormActionButton connects to a form with the matching identifier
// Make sure a Form component with identifier="example-form" exists

const fnProcessForm = async (data: FormData) => {
  console.log('Processing form data:', data)
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000))
}
</script>

pages._explore.sections.complex-usage.title

html

<FormActionButton
    identifier="complex-form"
    has-tooltip
    has-icon
    has-loading-icon
/>

typescript

<script setup lang="ts">
// This FormActionButton includes:
// - Tooltip showing form state
// - Icon (diskette for save, spinning icon for loading)
// - Loading animation when form is processing

const fnProcessForm = async (data: FormData) => {
  console.log('Processing form data:', data)
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000))
}
</script>

pages._explore.sections.props.title

Prop	Default	Type
identifier	''	string
hasTooltip	false	boolean
hasIcon	false	boolean
hasLoadingIcon	false	boolean
disabled	false	boolean

pages._explore.sections.types.title

Name	Type	Options
FormStateOptions	enum	IDLE \| ACTION_TO_BE_TRIGGERED \| DIRTY \| CLEAN \| ACTION_IN_PROGRESS \| ERROR