![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@highlight-ui/dialog
Advanced tools
Readme
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';
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>
);
}
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 |
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 |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.
FAQs
This is Dialog component used in Personio
The npm package @highlight-ui/dialog receives a total of 1,138 weekly downloads. As such, @highlight-ui/dialog popularity was classified as popular.
We found that @highlight-ui/dialog demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.