@hudoro/dialog v1.0.21

Hudoro Dialog

Hudoro Dialog is a strict and customizable dialog component for web development projects, designed for simplicity and adherence to strict design guidelines.

Screenshots

Package instalation

Instal package using pnpm

  pnpm add @hudoro/dialog

Instal package using yarn

  yarn add @hudoro/dialog

Instal package using npm

  npm i @hudoro/dialog

import package to your project

  import {Dialog, DialogBody, DialogFooter, DialogTitle} from '@hudoro/dialog'

Usage/Examples (you can combine using any package hudoro)

import {Dialog, DialogBody, DialogFooter, DialogTitle} from "@hudoro/dialog";
import {Button} from "@hudoro/button";
import {Box} from "@hudoro/box";
import {Text} from "@hudoro/text";

const App = () => {
  const [show, setShow] = useState(false);

  const toggleShow = () => {
    setShow((prev) => !prev);
  };
  return (
    <div>
      <Button warning onClick={toggleShow}>
        show
      </Button>
      <Dialog isShow={show} onHide={toggleShow}>
        <DialogTitle danger>Are you sure dani sooo tamvan?</DialogTitle>
        <DialogBody>
          <Text
          //any text props goes here
          >
            dani is so so so tamvan
          </Text>
        </DialogBody>
        <DialogFooter>
          <Box
          //any box props goes here
          >
            <Button link onClick={toggleShow}>
              no no
            </Button>
            <Button danger>Yes Delete this</Button>
          </Box>
        </DialogFooter>
      </Dialog>
    </div>
  );
};

Props @hudoro/dialog

Props that you can pass to <Dialog {...props}>

Props that you can pass to <DialogTitle {...props}>

Props that you can pass to <DialogBody {...props}>

Props that you can pass to <DialogFooter {...props}>