Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@leafygreen-ui/confirmation-modal

Package Overview
Dependencies
Maintainers
5
Versions
72
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/confirmation-modal

leafyGreen UI Kit Confirmation Modal

  • 5.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
71K
increased by60%
Maintainers
5
Weekly downloads
 
Created
Source

Confirmation Modal

npm (scoped)

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/confirmation-modal

NPM

npm install @leafygreen-ui/confirmation-modal

Example

import ConfirmationModal from '@leafygreen-ui/confirmation-modal';

function ExampleComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open Modal</button>
      <ConfirmationModal
        open={open}
        confirmButtonProps={{
          children: 'confirm',
          onClick: () => setOpen(false),
          disabled: true,
        }}
        cancelButtonProps={{
          onClick: () => setOpen(false),
          variant: 'default',
        }}
        title="Confirm Title Here"
        requiredInputText="confirm"
      >
        This is some description text, and it is extra long so it fills up this
        modal. Another thing about the modals here. This is some description
        text, and it is extra long so it fills up this modal. Another thing
        about the modals here.
      </ConfirmationModal>
    </>
  );
}

Properties

PropTypeDescriptionDefault
confirmButtonPropsButtonPropsThe confirm button on the right. An object that accepts all Button props except variant. The variant of the confirm button is controlled by the variant prop. The text is confirm by default but can by overridden with the children property.
cancelButtonPropsButtonPropsThe cancel button on the left. An object that accepts all Button props. except children. The text will always render cancel and the onClick property will also fire when the X button, or backdrop is clicked.
openbooleanDetermines open state of Modal componentfalse
titlestringTitle text to display above the main content text.
childrennodeChildren that will be rendered inside <ConfirmationModal /> component.
variant'default', 'danger'Sets the style variant.'default'
requiredInputTextstringIf provided, a text prompt will be displayed and the confirmation button will be disabled until the text prompt is filled out with the required text.
classNamestringStyle to be applied to the container's root node.
darkModebooleanDetermines if the component will appear in dark mode.false
onConfirm(Deprecated)functionCallback that fires when the action is confirmed. This can be used to set the modal to be closed. @deprecated - use confirmButtonProps and pass the onClick property() => {}
buttonText(Deprecated)stringText content of the confirmation button. @deprecated - use confirmButtonProps and pass the children property.
submitDisabled(Deprecated)booleanDetermines if the submit button should appear as disabled @deprecated - use confirmButtonProps and pass the disabled propertyfalse
onCancel(Deprecated)functionCallback that fires when the cancel button, x button, or backdrop is clicked. This can be used to set the modal to be closed. @deprecated - use cancelButtonProps and pass the onClick property() => {}

FAQs

Package last updated on 16 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc