form-footer

Form Footer

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/form-footer

NPM

npm install @leafygreen-ui/form-footer

Example

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

Properties

Prop	Type	Description	Default
primaryButton(Deprecated)	<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. @deprecated - use primaryButtonProps
primaryButtonProps	ButtonProps	The primary (right-most) button. An object that accepts all Button props but variant is limited to primary and danger.
backButtonProps	ButtonProps	The back button, the left-most button, will only appear if backButtonProps is defined. An object that accepts all Button props but variant is limited to default and dangerOutline.
cancelButtonProps	ButtonProps	The back button, the left-most button, will only appear if cancelButtonProps is defined. An object that accepts all Button props except for the variant prop. The variant is default.
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 (Deprecated)

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