@leafygreen-ui/form-footer NPM

Form Footer

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/form-footer

NPM

npm install @leafygreen-ui/form-footer

Example

<FormFooter
  primaryButton={{
    text: 'Save Draft',
    onClick: (e) => {...}
  }}
  errorMessage={'There is an error in this form'}
/>

Output HTML

<footer>
  <div>
    <div role="alert">
      <svg aria-label="Warning Icon"></svg>
      <div>There is an error in this form</div>
    </div>
    <button type="button" aria-disabled="false">
      <div>Cancel</div>
    </button>
    <button aria-disabled="false">
      <div>Save Draft</div>
    </button>
  </div>
</footer>

Properties

Prop	Type	Description	Default
primaryButton	`<Button>` or `PrimaryButtonProps`	The primary (right-most) button. Defined as a `<Button>` element, or as an object with the shape below. `darkMode` is handled internally so you do not have to pass the `darkMode` prop.
cancelButtonText	`string`	Text for the cancel button. A cancel button will only appear if this text is defined.	"Cancel"
onCancel	`(event: React.MouseEvent) => void`	onClick callback for the cancel button.
backButtonText	`string`	Text for the back button. A back button will only appear if text is defined.
onBackClick	`(event: React.MouseEvent) => void`	onClick callback for the back button
errorMessage	`string`	Text within the error banner. The banner will only appear if an error message is defined.
contentClassName	`string`	Styling prop for the content. Useful for setting left and right margins, or max-width
className	`string`	Styling prop

Primary Button

Properties

Prop	Type	Description	Default
text	`string`	Text for the primary button. Required if the prop is defined as an object
onClick	`(event: React.MouseEvent) => void`	onClick callback for the primary button
variant	`'primary'` or `'danger'`	Visual variant of the primary button. Define the button as JSX to further customize the button	`"primary"`
disabled	`boolean`	Whether the button is disabled	`false`
type	`'button'` or `'submit'`	HTML type of the button