@highlight-ui/dialog

Installation

Using npm:

npm install @highlight-ui/dialog

Using yarn:

yarn add @highlight-ui/dialog

Using pnpm:

pnpm install @highlight-ui/dialog

In your (S)CSS file:

@import url('@highlight-ui/dialog');

Once the package is installed, you can import the library:

import { Dialog } from '@highlight-ui/dialog';

Usage

import React, { useState } from 'react';
import { Dialog, Modal } from '@highlight-ui/dialog';

export default function DialogExample() {
  return (
    <div>
      <Button
        variant="emphasized"
        onClick={() => {
          setIsDialogOpen(true);
        }}
      >
        Show dialog
      </Button>

      <Dialog
        title={title}
        open={isDialogOpen}
        size="small"
        variant="default"
        primaryButton={{
          buttonLabel: 'Confirm',
          buttonState: 'default',
        }}
        secondaryButtons={[
          {
            buttonLabel: 'Cancel',
            buttonState: 'default',
          },
        ]}
      />
    </div>
  );
}

Props 📜

Dialog

Dialog props extend the Modal props below

| Prop | Type | Required | Default | Description | | :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------- | :------------------------------------------------------------------------------------------------------ | | title | string | Yes | | Sets the title of the dialog | | labelledBy | string | No | | Sets the reference to the aria-labelledby attribute. It'll add a default value if not present. | | describedBy | string | No | | Sets the reference to the aria-describedby attribute | | variant | 'default', 'destructive' | No | default | default is used for regular interactions and destructive is usually for destructing (e.g. deletion) | | size | 'small', 'medium', 'large' | No | small | Sets the width of the dialog | | primaryButton | DialogActionButtonProps | No | | Configures the label/icon and behaviour of the primary action button | | secondaryButtons | DialogActionButtonProps[] | No | | Configures the label/icon and behaviour of the secondary action buttons |

Modal

| Prop | Type | Required | Default | Description | | :-------------------- | :------------ | :------- | :------ | :------------------------------------------------------ | | open | boolean | Yes | false | Specifies whether the Dialog is mounted and displayed | | className | string | No | | Allows providing a custom class name | | initialFocusElement | HTMLElement | No | | Specifies an initial focused HTML element | | onRequestToClose | () => void | No | | Gets called when the close or cancel button is pressed | | onClose | () => void | No | | Gets called after the Dialog is closed | | onOpen | () => void | No | | Gets called after the Dialog is opened |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.