@highlight-ui/dialog

@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.