Dialog

Dialog modal displayed on top of the page.

import { Button, Dialog, DialogPanel } from '@tremor/react';import React from 'react';
export function DialogHero() {  const [isOpen, setIsOpen] = React.useState(false);  return (    <div className="flex justify-center">      <button        className="flex items-center justify-center rounded-tremor-small border border-tremor-border bg-tremor-background px-2.5 py-2 text-tremor-default font-medium text-tremor-content-strong shadow-tremor-input hover:bg-tremor-background-muted dark:border-dark-tremor-border dark:bg-dark-tremor-background dark:text-dark-tremor-content-strong dark:shadow-dark-tremor-input hover:dark:bg-dark-tremor-background-muted"        onClick={() => setIsOpen(true)}      >        Show Dialog      </button>      <Dialog        open={isOpen}        onClose={() => setIsOpen(false)}        static={true}        className="z-[100]"      >        <DialogPanel className="max-w-sm">          <Button            variant="light"            className="mx-auto flex items-center"            onClick={() => setIsOpen(false)}          >            Close          </Button>        </DialogPanel>      </Dialog>    </div>  );}

Import Dialog

Tremor exports two components to create a dialog.

import { Dialog, DialogPanel } from '@tremor/react';

Usage example

The example below shows a Dialog used as a success indicator.

import { Button, Dialog, DialogPanel } from '@tremor/react';import React from 'react';
export function DialogUsageExample() {  const [isOpen, setIsOpen] = React.useState(false);  return (    <>    <Button className="mx-auto block" onClick={() => setIsOpen(true)}>Open Dialog</Button>    <Dialog open={isOpen} onClose={(val) => setIsOpen(val)} static={true}>      <DialogPanel>        <h3 className="text-lg font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">Account Created Successfully</h3>        <p className="mt-2 leading-6 text-tremor-default text-tremor-content dark:text-dark-tremor-content">          Your account has been created successfully. You can now login to your          account. For more information, please contact us.        </p>        <Button className="mt-8 w-full" onClick={() => setIsOpen(false)}>          Got it!        </Button>      </DialogPanel>    </Dialog>    </>  );}

API Reference: Dialog

open: Whether or not the `Dialog is `open`.

onClose: Callback when the dialog is closed, typically used to update `open` to false.

initialFocus: Refers to the element that should initially gain focus.

as: Specifies the component or element type that the Dialog will use for rendering.

static: Whether the element should ignore the internally managed open/closed state.

unmount: Whether the element should be unmounted or hidden based on the open/closed state.

API Reference: DialogPanel

as: Controls whether the component is removed from the DOM or merely hidden, based on its open/closed status.

Theming

Dialog

This component does not have any tokens for styling.

DialogPanel

Element	Theme Token
Background color colorstremor-background-DEFAULT	colorstremor-background-DEFAULT
Text color colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Ring color colorstremor-ring-DEFAULT	colorstremor-ring-DEFAULT
Roundness borderRadiustremor-default	borderRadiustremor-default