@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

17 days ago

2 months ago

2 months ago

5 months ago

5 months ago

5 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

7 months ago

7 months ago

9 months ago

9 months ago

7 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year 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

1 year ago

2 years 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

3 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