useModal ​

useModal are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).

From a UI perspective, you can think of Dialogs as a type of floating modal, which covers only a portion of the screen. This means Dialogs should only be used for quick user actions

It is also possible change de slots from header, body, footer, loading and prompt.

Overview ​

dialog({
  title: 'Alert',
});

interface UseButtonClassesProps {
  title?: string;
  size?: XModalSize;
  titleClass?: string;
  subTitle?: string;
  description?: string;
  position?: XModalRawPositionClassVariant;
  iconLeft?: string;
  iconRight?: string;
  maximized?: boolean;
  seamless?: boolean;
  persistent?: boolean;
  fullWidth?: boolean;
  noFooter?: boolean;
  prompt?: boolean;
  buttons?: UseButtonClassesProps[];
  confirm?: boolean;
  onOk?: (model?: string) => void;
  onCancel?: () => void;
  okLabel?: string;
  cancelLabel?: string;
}

Basic ​

Size ​

Custom Size ​

• Also you can customize size passing a specific number of pixel.

dialog({
  title: 'Alert',
  size: '900px',
});

Persistent ​

Maximized ​

Positions ​

Seamless ​