FormFooter

Presentation component for form footer.

Secondary button

To show the secondary button in the footer you need to provide a function to the onSecondaryButtonClick prop to the Form component.

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState(''); const handleChange = (event, payload) => { setValue(payload.value); }; const handleSubmit = (event) => { event.preventDefault(); console.log('form submitted'); }; const handleSecondaryButtonClick = (event) => { console.log('secondary button clicked'); }; return ( <form onSubmit={handleSubmit}> <TextField label="Label" name="form-demo-textfield" onChange={handleChange} value={value} /> <FormFooter onSecondaryButtonClick={handleSecondaryButtonClick} /> </form> ); }

function Example() {
  const [value, setValue] = React.useState('');

  const handleChange = (event, payload) => {
    setValue(payload.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('form submitted');
  };

  const handleSecondaryButtonClick = (event) => {
    console.log('secondary button clicked');
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField label="Label" name="form-demo-textfield" onChange={handleChange} value={value} />
      <FormFooter onSecondaryButtonClick={handleSecondaryButtonClick} />
    </form>
  );
}

Change footer button text

You can change the text in the footer buttons by using the secondaryButtonContents and submitButtonContents props on the Form.

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState(''); const handleChange = (event, payload) => { setValue(payload.value); }; const handleSubmit = (event) => { event.preventDefault(); console.log('form submitted'); }; const handleSecondaryButtonClick = (event) => { console.log('secondary button clicked'); }; return ( <form onSubmit={handleSubmit}> <TextField label="Label" name="form-demo-textfield" onChange={handleChange} value={value} /> <FormFooter onSecondaryButtonClick={handleSecondaryButtonClick} secondaryButtonContents="Custom secondary button text" submitButtonContents="Submit button text" /> </form> ); }

function Example() {
  const [value, setValue] = React.useState('');

  const handleChange = (event, payload) => {
    setValue(payload.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('form submitted');
  };

  const handleSecondaryButtonClick = (event) => {
    console.log('secondary button clicked');
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField label="Label" name="form-demo-textfield" onChange={handleChange} value={value} />
      <FormFooter
        onSecondaryButtonClick={handleSecondaryButtonClick}
        secondaryButtonContents="Custom secondary button text"
        submitButtonContents="Submit button text"
      />
    </form>
  );
}

Props