Modal

Modal is built on accessible Radix Dialog primitives with smooth open/close transitions.

Quick Preview

Preset Examples

Code

<Modal>
  <ModalTrigger asChild>
    <Button variant="primary">Open modal</Button>
  </ModalTrigger>
  <ModalContent variant="elevated" size="md">
    <ModalHeader>
      <ModalTitle>Project Settings</ModalTitle>
      <ModalDescription>Update your project information.</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <ModalClose asChild><Button variant="ghost">Cancel</Button></ModalClose>
      <Button variant="primary">Save</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

Interactive Playground

Radius (10px)

Code

import {
  Button,
  Modal,
  ModalClose,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger
} from "@altech-ui/react";

export function Example() {
  return (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open modal</Button>
      </ModalTrigger>
      <ModalContent
        variant="danger"
        size="sm"
        placement="center"
        backdrop="default"
        style={{ "--altech-radius": "10px" } as React.CSSProperties}
      >
        <ModalHeader>
          <ModalTitle>Delete project</ModalTitle>
          <ModalDescription>This action cannot be undone. Please confirm to continue.</ModalDescription>
        </ModalHeader>
        <ModalFooter>
          <ModalClose asChild><Button variant="ghost">Cancel</Button></ModalClose>
          <ModalClose asChild><Button variant="danger">Delete</Button></ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

Variants

Code

<Modal>
  <ModalTrigger asChild><Button variant="outline">Default</Button></ModalTrigger>
  <ModalContent variant="default" size="sm">
    <ModalHeader>
      <ModalTitle>Default modal</ModalTitle>
      <ModalDescription>Variant preview for quick copy.</ModalDescription>
    </ModalHeader>
  </ModalContent>
</Modal>

Placement

Code

<Modal>
  <ModalTrigger asChild><Button variant="secondary">Top Modal</Button></ModalTrigger>
  <ModalContent placement="top" size="sm">
    <ModalHeader>
      <ModalTitle>Top placement</ModalTitle>
      <ModalDescription>Modal anchored to top.</ModalDescription>
    </ModalHeader>
  </ModalContent>
</Modal>

Backdrop Variants

Code

<Modal>
  <ModalTrigger asChild><Button variant="outline">Blur Backdrop</Button></ModalTrigger>
  <ModalContent backdrop="blur" size="sm">
    <ModalHeader>
      <ModalTitle>Blur backdrop</ModalTitle>
      <ModalDescription>Backdrop style blur.</ModalDescription>
    </ModalHeader>
  </ModalContent>
</Modal>

Sizes

Code

<Modal>
  <ModalTrigger asChild><Button variant="primary">Open Large Modal</Button></ModalTrigger>
  <ModalContent size="lg" variant="elevated">
    <ModalHeader>
      <ModalTitle>Large modal</ModalTitle>
      <ModalDescription>Use this as your starting template.</ModalDescription>
    </ModalHeader>
  </ModalContent>
</Modal>

Ready Patterns

Code

<Modal>
  <ModalTrigger asChild><Button variant="outline">Confirm Delete</Button></ModalTrigger>
  <ModalContent variant="danger" size="sm">
    <ModalHeader>
      <ModalTitle>Delete item</ModalTitle>
      <ModalDescription>This action is permanent.</ModalDescription>
    </ModalHeader>
    <ModalFooter>
      <ModalClose asChild><Button variant="ghost">Cancel</Button></ModalClose>
      <Button variant="danger">Delete</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

Usage

Code

import {
  Button,
  Modal,
  ModalClose,
  ModalTrigger,
  ModalContent,
  ModalHeader,
  ModalTitle,
  ModalDescription,
  ModalFooter,
} from "@altech-ui/react"

ModalContent supports:

variant: default | elevated | danger | success
size: xs | sm | md | lg | xl | cover | full
placement: center | top | bottom | left | right
backdrop: default | blur | transparent | dark