abaabil.dialog

Dialog Component

The Dialog component is a versatile and customizable modal dialog built with React. It supports different variants, sizes, and provides accessibility features, making it suitable for a wide range of use cases.

Usage

import * as React from 'react';
import Dialog from './path-to-dialog';
import Button from 'abaabil.button';

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openDialog = () => setIsOpen(true);
  const closeDialog = () => setIsOpen(false);

  return (
    <div>
      <Button onClick={openDialog}>Open Dialog</Button>
      <Dialog
        isOpen={isOpen}
        onClose={closeDialog}
        title="Dialog Title"
        subtitle="Dialog Subtitle"
        variant="primary"
        size="md"
      >
        <p>This is the content of the dialog.</p>
      </Dialog>
    </div>
  );
};

export default App;

Props

Prop	Type	Default	Description
isOpen	boolean	false	Whether the dialog is open or not.
onClose	function	null	Callback function to handle closing the dialog.
title	string	''	The title of the dialog.
subtitle	string	''	The subtitle of the dialog.
children	node	null	The content to display inside the dialog.
variant	string	primary	The dialog variant. Can be primary, secondary, tertiary, success, or error.
size	string	md	The size of the dialog. Can be sm, md, or lg.
className	string	''	Additional class names to apply to the dialog.
...props	object	{}	Additional props to pass to the dialog element.

Variants

• primary: Default dialog style with primary background and text.
• secondary: Secondary dialog style with secondary background and text.
• tertiary: Tertiary dialog style with tertiary background and text.
• success: Success dialog style with success background and text.
• error: Error dialog style with error background and text.

Sizes

• sm: Small dialog size.
• md: Medium dialog size.
• lg: Large dialog size.

Example

import * as React from 'react';
import Dialog from './path-to-dialog';
import Button from 'abaabil.button';

const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const openDialog = () => setIsOpen(true);
  const closeDialog = () => setIsOpen(false);

  return (
    <div>
      <Button onClick={openDialog}>Open Dialog</Button>
      <Dialog
        isOpen={isOpen}
        onClose={closeDialog}
        title="Dialog Title"
        subtitle="Dialog Subtitle"
        variant="primary"
        size="md"
      >
        <p>This is the content of the dialog.</p>
      </Dialog>
    </div>
  );
};

export default Example;

This example demonstrates various ways to use the Dialog component, showcasing different variants, sizes, and states.