Modal

Modal dialogs

Import: import { Modal } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information.

() => {
  const [visible, setVisible] = React.useState(false);
  const { Cluster } = KubeIcon;
  const ref = React.createRef();

  const openModal = () => {
    setVisible(true);
  };

  const closeModal = () => {
    console.log(ref.current);
    setVisible(false);
  };

  return (
    <>
      <Button onClick={openModal}>Open Modal</Button>
      <Modal
        ref={ref}
        visible={visible}
        title="Modal demo"
        description="Modal description"
        titleIcon={<Cluster size={40} />}
        onCancel={closeModal}
      >
        Modal content
      </Modal>
    </>
  );
}

1
() => {
2
  const [visible, setVisible] = React.useState(false);
3
  const { Cluster } = KubeIcon;
4
  const ref = React.createRef();
5

6
  const openModal = () => {
7
    setVisible(true);
8
  };
9

10
  const closeModal = () => {
11
    console.log(ref.current);
12
    setVisible(false);
13
  };
14

15
  return (
16
    <>
17
      <Button onClick={openModal}>Open Modal</Button>
18
      <Modal
19
        ref={ref}
20
        visible={visible}
21
        title="Modal demo"
22
        description="Modal description"
23
        titleIcon={<Cluster size={40} />}
24
        onCancel={closeModal}
25
      >
26
        Modal content
27
      </Modal>
28
    </>
29
  );
30
}
31

() => {
  const modal = useModal();

  const openChildModal = () => {
    modal.open({
      title: 'Imperative Modal',
      description: 'description text',
      content: 'modal content',
    });
  };

  const content = <Button onClick={openChildModal}>Nest Imperative Modal</Button>;

  const openModal = () => {
    modal.open({
      title: 'Imperative Modal',
      description: 'description text',
      content,
    });
  };

  return <Button onClick={openModal}>Imperative Modal</Button>;
}

1
() => {
2
  const modal = useModal();
3

4
  const openChildModal = () => {
5
    modal.open({
6
      title: 'Imperative Modal',
7
      description: 'description text',
8
      content: 'modal content',
9
    });
10
  };
11

12
  const content = <Button onClick={openChildModal}>Nest Imperative Modal</Button>;
13

14
  const openModal = () => {
15
    modal.open({
16
      title: 'Imperative Modal',
17
      description: 'description text',
18
      content,
19
    });
20
  };
21

22
  return <Button onClick={openModal}>Imperative Modal</Button>;
23
}
24

() => {
  const modal = useModal();
  return (
    <Button
      onClick={() => {
        modal.confirm({ title: 'confirm modal', content: 'confirm content' });
      }}
    >
      Imperative Modal
    </Button>
  );
}

1
() => {
2
  const modal = useModal();
3
  return (
4
    <Button
5
      onClick={() => {
6
        modal.confirm({ title: 'confirm modal', content: 'confirm content' });
7
      }}
8
    >
9
      Imperative Modal
10
    </Button>
11
  );
12
}
13

Layout

General

Data Entry

Data Display

Feedback

Modal

Basic Usage

Important Modal

Confirm Modal