@purpurds/modal
v4.4.0
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
2,171
Readme
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>
);
};