HQ UI

Modal

Pop up a dialog box, demanding attention like a traffic stop sign, ideal for critical interactions.

Installation

In the terminal, run the following command to begin:
npx hq-kit add modal

Basic

Alert Modal

Controlled

Sizes

The modal is set to lg by default. You can adjust it to any size from the available options.

Sticky

You can use the Modal.Body component to make the body of the modal sticky.

Nested

Triggered By Menu

Look at these example

interface ModalActionProps {
  state: string
  onOpenChange: (state: string) => void
  actionType: { description: string; action: () => void; confirmText: string; title: string }
  disabled: boolean
}
 
const ModalAction = (props: ModalActionProps) => (
  <Modal.Content isOpen={props.state !== ''} onOpenChange={props.onOpenChange}>
    <Modal.Header>
      <Modal.Title>{props.actionType?.title}</Modal.Title>
      <Modal.Description>{props.actionType?.description}</Modal.Description>
    </Modal.Header>
    <Modal.Footer>
      <Button slot='close' variant='outline'>
        Cancel
      </Button>
      <Button
        variant={props.state === 'restore' ? 'primary' : 'danger'}
        isDisabled={loading}
        isPending={loading}
        onPress={actions(state)?.action}
      >
        {actions(state)?.confirmText}
      </Button>
    </Modal.Footer>
  </Modal.Content>
)

Then you can use it like this.

<ModalAction
  state={state}
  onOpenChange={closeModal}
  actionType={actionType(state)}
  disabled={loading}
/>

With that, now we can modify the actionType function to return the initial state.

const actionType = (t: string) => {
  const initialsState = {
    title: '',
    description: '',
    confirmText: '',
    action: () => {}
  }
 
  switch (t) {
    case 'delete': ...
    case 'ban': ...
    case 'restore': ...
    default:
      return initialsState
  }
}