@highlight-ui/dialog NPM

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

@highlight-ui/button @highlight-ui/tooltip @highlight-ui/typography @highlight-ui/utils-commons @highlight-ui/utils-hooks @highlight-ui/utils-portal-manager @mantine/hooks @use-it/event-listener lodash.invoke

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @zalastax/nolb-_hig

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago