Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@highlight-ui/dialog

Package Overview
Dependencies
Maintainers
10
Versions
194
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@highlight-ui/dialog

This is Dialog component used in Personio

  • 9.3.2
  • npm
  • Socket score

Version published
Weekly downloads
1.1K
increased by5.31%
Maintainers
10
Weekly downloads
 
Created
Source

npm personio.design storybook.personio.design

@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

PropTypeRequiredDefaultDescription
titlestringYesSets the title of the dialog
labelledBystringNoSets the reference to the aria-labelledby attribute. It'll add a default value if not present.
describedBystringNoSets the reference to the aria-describedby attribute
variant'default', 'destructive'Nodefaultdefault is used for regular interactions and destructive is usually for destructing (e.g. deletion)
size'small', 'medium', 'large'NosmallSets the width of the dialog
primaryButtonDialogActionButtonPropsNoConfigures the label/icon and behaviour of the primary action button
secondaryButtonsDialogActionButtonProps[]NoConfigures the label/icon and behaviour of the secondary action buttons

Modal

PropTypeRequiredDefaultDescription
openbooleanYesfalseSpecifies whether the Dialog is mounted and displayed
classNamestringNoAllows providing a custom class name
initialFocusElementHTMLElementNoSpecifies an initial focused HTML element
onRequestToClose() => voidNoGets called when the close or cancel button is pressed
onClose() => voidNoGets called after the Dialog is closed
onOpen() => voidNoGets 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.

FAQs

Package last updated on 11 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc