Dialog Components
Explore different dialog types and features—like confirmation dialogs, alert dialogs, and more.
Confirmation Dialog
import { useState } from "react";
import {
HvButton,
HvDialog,
HvDialogActions,
HvDialogContent,
HvDialogTitle,
} from "@hitachivantara/uikit-react-core";
export default function Demo() {
const [open, setOpen] = useState(false);
return (
<>
<HvDialog
open={open}
onClose={() => setOpen(false)}
maxWidth="sm"
fullWidth
>
<HvDialogTitle variant="error">Are you sure?</HvDialogTitle>
<HvDialogContent>This action cannot be undone.</HvDialogContent>
<HvDialogActions>
<HvButton
autoFocus
variant="secondarySubtle"
onClick={() => setOpen(false)}
>
Cancel
</HvButton>
<HvButton
variant="negative"
onClick={() => {
setOpen(false);
}}
>
Confirm
</HvButton>
</HvDialogActions>
</HvDialog>
<HvButton variant="negativeSubtle" onClick={() => setOpen(true)}>
Delete Account
</HvButton>
</>
);
}Multiple Step Dialog
import { useEffect, useState } from "react";
import {
HvButton,
HvDialog,
HvDialogActions,
HvDialogContent,
HvDialogTitle,
HvInput,
HvTypography,
} from "@hitachivantara/uikit-react-core";
type FormData = {
name: string;
email: string;
};
type StepProps = {
data: FormData;
onChange?: (changes: Partial<FormData>) => void;
};
export default function Demo() {
const [open, setOpen] = useState(false);
const [step, setStep] = useState(0);
const [formData, setFormData] = useState<FormData>({ name: "", email: "" });
useEffect(() => {
if (!open) {
setStep(0);
setFormData({ name: "", email: "" });
}
}, [open]);
const handleChange = (changes: Partial<FormData>) =>
setFormData((d) => ({ ...d, ...changes }));
const handleNext = () => setStep((s) => s + 1);
const handleBack = () => setStep((s) => s - 1);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (step < 2) {
handleNext();
} else {
console.log(formData);
setOpen(false);
}
};
return (
<>
<HvDialog
open={open}
onClose={() => setOpen(false)}
maxWidth="sm"
fullWidth
>
<HvDialogTitle>
{step === 0
? "Enter your name"
: step === 1
? "Enter your email"
: "Is this information correct?"}
</HvDialogTitle>
<form onSubmit={handleSubmit}>
<HvDialogContent>
{step === 0 && <Step1 data={formData} onChange={handleChange} />}
{step === 1 && <Step2 data={formData} onChange={handleChange} />}
{step === 2 && <Step3 data={formData} />}
</HvDialogContent>
<HvDialogActions>
<HvButton variant="secondarySubtle" onClick={() => setOpen(false)}>
Cancel
</HvButton>
<div className="flex gap-xs">
{step > 0 && (
<HvButton
variant="secondarySubtle"
type="button"
onClick={handleBack}
>
Previous
</HvButton>
)}
<HvButton variant="primary" type="submit">
{step < 2 ? "Next" : "Confirm"}
</HvButton>
</div>
</HvDialogActions>
</form>
</HvDialog>
<HvButton variant="secondarySubtle" onClick={() => setOpen(true)}>
Open Multi-Step Dialog
</HvButton>
</>
);
}
const Step1 = ({ data, onChange }: StepProps) => (
<HvInput
label="Name"
name="name"
value={data.name}
onChange={(e) => onChange?.({ name: e.target.value })}
/>
);
const Step2 = ({ data, onChange }: StepProps) => (
<HvInput
label="Email"
name="email"
type="email"
value={data.email}
onChange={(e) => onChange?.({ email: e.target.value })}
/>
);
const Step3 = ({ data }: StepProps) => (
<div className="flex flex-col gap-xxs">
<div className="flex gap-xs">
<HvTypography>Name:</HvTypography>
<HvTypography>{data.name}</HvTypography>
</div>
<div className="flex gap-xs">
<HvTypography>Email:</HvTypography>
<HvTypography>{data.email}</HvTypography>
</div>
</div>
);