Overlay / COMPONENT

Modal

Web · implementedDesktop · preview

Dialog overlay untuk aksi penting atau form lanjutan.

import { Modal } from "./vendor/syne-ui/index.js";TypeScript ready

Try the controls above.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX

import { Modal } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <Modal defaultOpen title="Edit profile"><Modal.Header>Account details</Modal.Header><Modal.Body>Your form goes here.</Modal.Body><Modal.Footer><span>Escape or the close button dismisses this dialog.</span></Modal.Footer></Modal>
  );
}

Make it yours

Use className and --syne-* tokens to match your design system.