2.0.4-alpha.0 • Published 2 years ago
@nature-ui/alert-dialog v2.0.4-alpha.0
@nature-ui/alert-dialog
AlertDialog component is used interrupt the user with a mandatory confirmation or action.
Installation
yarn add @nature-ui/alert-dialog
# or
npm i @nature-ui/alert-dialog
Import components
import {
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
} from '@nature-ui/core';
Basic usage
Usage
AlertDialog requires that you provide the leastDestructiveRef
prop.
Based on WAI-ARIA specifications, focus should be placed on the least destructive element when the dialog opens, to prevent users from accidentally confirming the destructive action.
function AlertDialogExample() {
const [isOpen, setIsOpen] = React.useState();
const onClose = () => setIsOpen(false);
const cancelRef = React.useRef();
return (
<>
<Button onClick={() => setIsOpen(true)}>Delete Customer</Button>
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={onClose}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader>Please Confirm!</AlertDialogHeader>
<AlertDialogBody>
Are you sure you want to delete something? This action is
permanent, and we're totally not just flipping a field called
"deleted" to "true" in our database, we're actually deleting
something.
</AlertDialogBody>
<AlertDialogFooter>
<Button
ref={cancelRef}
onClick={onClose}
className='bg-gray-200 hover:bg-gray-300'
>
Nevermind
</Button>
<Button className='ml-3' variant='outline'>
Yes, delete
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</>
);
}
2.0.4-alpha.0
2 years ago
0.0.0-dev-20221025095017
2 years ago
2.0.3
2 years ago
2.0.2
2 years ago
0.0.0-dev-20221025084126
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.2.0
3 years ago
0.1.1-alpha.6
3 years ago
0.1.1-alpha.4
3 years ago
0.1.1-alpha.3
3 years ago
0.1.1-alpha.2
3 years ago
0.1.1-alpha.1
3 years ago
0.1.1-alpha.0
3 years ago