@purpurds/modal v5.1.1

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import as ModalStories from "./src/modal.stories"; import as ModalContentStories from "./src/modal-content.stories"; import packageInfo from "./package.json";

Modal

Version {packageInfo.version}

Showcase

Properties

Modal

ModalContent

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

import { Button, Modal } from "@purpurds/purpur";

export const MyComponent = () => {
  const actions = [
    {
      label: "Primary action",
      onClick: () => {
        // click event handler
      },
    },
  ];

  return (
    <Modal>
      <Modal.Trigger>
        <Button variant="primary">Open modal</Button>
      </Modal.Trigger>
      <Modal.Content
        title="A title"
        description="A short optional description of the modal"
        actions={actions}
        showCloseButton
        closeButtonAllyLabel="Close"
      >
        Some content
      </Modal.Content>
    </Modal>
  );
};