Components
Loading preview...
Display popup content that requires attention or provides additional information.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/modalimport { useRef, useState } from "react";
import { Button } from "@/components/ui/button-1";
import { Modal } from "@/components/ui/modal";
export default function ControlInitialFocusDemo() {
const [open6, setOpen6] = useState(false);
const initialFocusRef = useRef<HTMLButtonElement>(null);
return (
<div>
<Button onClick={() => setOpen6(true)} size="small">
Open Modal
</Button>
<Modal.Modal
active={open6}
initialFocusRef={initialFocusRef}
onClickOutside={() => setOpen6(false)}
>
<Modal.Body>
<Modal.Header>
<Modal.Title>Initial Focus</Modal.Title>
<Modal.Subtitle>
This Modal.Modal is set up to programmatically move the focus onto the
Submit button, making it possible to promptly continue with the
Enter key.
</Modal.Subtitle>
</Modal.Header>
</Modal.Body>
<Modal.Actions>
<Modal.Action onClick={() => setOpen6(false)} type="secondary">
Cancel
</Modal.Action>
<Modal.Action onClick={() => setOpen6(false)} ref={initialFocusRef}>
Submit
</Modal.Action>
</Modal.Actions>
</Modal.Modal>
</div>
);
}