Overlays

Overlay components display content above the main interface. All components are built on Radix UI primitives for accessibility.

Prerequisites

Complete the @mdk/core installation and add the dependency

`Dialog`

Modal dialog for forms, confirmations, and focused tasks. Built on Radix UI primitives.

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@mdk/core'

`DialogContent` props

Prop	Type	Default	Description
`title`	`string`	none	Dialog title
`description`	`string`	none	Dialog description
`closable`	`boolean`	`false`	Show close button
`onClose`	`function`	none	Close callback
`closeOnClickOutside`	`boolean`	`true`	Close when clicking outside
`closeOnEscape`	`boolean`	`true`	Close on Escape key
`bare`	`boolean`	`false`	Minimal header styling

Basic usage

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent title="Confirm Action" closable onClose={() => {}}>
    <p>Are you sure you want to proceed?</p>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Styling

.mdk-dialog__overlay: Background overlay
.mdk-dialog__content: Dialog container
.mdk-dialog__header: Header area
.mdk-dialog__title: Title text
.mdk-dialog__description: Description text
.mdk-dialog__footer: Footer area

`AlertDialog`

Confirmation dialog for destructive or irreversible actions.

Import

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '@mdk/core'

Basic usage

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="danger">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogTitle>Delete item?</AlertDialogTitle>
    <AlertDialogDescription>
      This action cannot be undone.
    </AlertDialogDescription>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction>Delete</AlertDialogAction>
  </AlertDialogContent>
</AlertDialog>

`DropdownMenu`

Contextual menu triggered by a button click.

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuLabel,
  DropdownMenuGroup,
} from '@mdk/core'

Basic usage

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Options</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <DropdownMenuItem onClick={() => {}}>Edit</DropdownMenuItem>
    <DropdownMenuItem onClick={() => {}}>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onClick={() => {}} className="text-red-500">
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Styling

.mdk-dropdown-menu__content: Menu container
.mdk-dropdown-menu__item: Menu item
.mdk-dropdown-menu__label: Label text
.mdk-dropdown-menu__separator: Divider line

Floating content panel triggered by click or hover.

Import

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from '@mdk/core'

Basic usage

<Popover>
  <PopoverTrigger asChild>
    <Button>Show Details</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Additional information goes here.</p>
  </PopoverContent>
</Popover>

Styling

.mdk-popover__content: Popover container

`Toast`

Temporary notification messages.

Import

import { Toast, ToastProvider, ToastViewport, Toaster } from '@mdk/core'

`Toast` props

Prop	Type	Default	Description
`title`	`string`	none	Required. Toast title
`description`	`string`	none	Additional description
`variant`	`'success' \| 'error' \| 'warning' \| 'info'`	`'info'`	Toast variant
`icon`	`ReactElement`	none	Custom icon

`ToastViewport` props

Prop	Type	Default	Description
`position`	`ToastPosition`	`'bottom-right'`	Toast position

Available positions: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'

Setup

import { ToastProvider, ToastViewport } from '@mdk/core'

function App() {
  return (
    <ToastProvider>
      {/* Your app content */}
      <ToastViewport position="bottom-right" />
    </ToastProvider>
  )
}

Basic usage

import { Toast, ToastProvider, ToastViewport } from '@mdk/core'
import { useState } from 'react'

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Toast</Button>
      <Toast
        open={open}
        onOpenChange={setOpen}
        title="Success!"
        description="Your changes have been saved."
        variant="success"
      />
    </>
  )
}

Styling

.mdk_toast: Toast container
.mdk_toast__header: Header section
.mdk_toast__title: Title text
.mdk_toast__description: Description text
.mdk_toast__close: Close button

Hover-triggered informational popup.

Import

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@mdk/core'

Basic usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="icon">
        <InfoIcon />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      Additional information
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Styling

.mdk-tooltip__content: Tooltip container

Prerequisites

`Dialog`

Import

`DialogContent` props

Basic usage

Styling

`AlertDialog`

Import

Basic usage

`DropdownMenu`

Import

Basic usage

Styling

`Popover`

Import

Basic usage

Styling

`Toast`

Import

`Toast` props

`ToastViewport` props

Setup

Basic usage

Styling

`Tooltip`

Import

Basic usage

Styling

On this page