Dialog

Basic

• Dialog component can be controlled by open and onClose props.
• Dialog component can be self-closed by 3 reasons specified in the DialogCloseReason type: outside-press | escape-key | close-icon.
• Dialog component requires at least one DialogContent and one DialogAction to render.

import { WarningOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function Basic() {

Full width

• The default width of the Dialog component is fit-content. To make it full of available width, set the fullWidth prop to true.

import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function FullWidth() {
  const [open, setOpen] = React.useState(false);

Max width

• You can change dialog max width by setting maxWidth prop to predefined values: xs, sm, md, lg, xl.
• The default maxWidth value is sm.

import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  DialogProps,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function MaxWidth() {

Close Icon

• You can custom the close icon by setting closeIcon prop.
• You can hide the close icon by setting hideCloseIcon prop to true.

import { CloseCircleFill } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  DialogProps,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Close Dialog By Escape

• By default, dialog component can be closed by clicking the escape key. 
• You can disable this behavior by setting the closeByEscape prop to false.

import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function CloseByEscape() {
  const [open, setOpen] = React.useState(false);

Close Dialog By Click Out Side

• By default, dialog component can be closed by clicking out side. 
• You can disable this behavior by setting the closeByOutsideClick prop to false.

import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function CloseByClickOutSide() {
  const [open, setOpen] = React.useState(false);

Customized Close Button

• You can customize the close button by setting the closeButton prop.

import { CloseCircleOutline, WarningOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  IconButton,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

Nested Dialog

• Dialogs can be nested by using the Dialog component as a child of another Dialog component.

import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function NestedDialog() {
  const [open, setOpen] = React.useState(false);

Initial Focus

• You can set the initial focus element of the dialog when open by using the initialFocus prop.
• The initialFocus prop can be either a number (tabbable index as specified by the order) or a ref.
• You can set this to a negative number to ignore the initial focus.

// This is a simple example of disabling initial focus
<Dialog initialFocus={-1} {...props}>
{/* other elem

Using with from

import {
  Autocomplete,
  AutocompleteOption,
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Input,
  ListItemText,
  Select,
  SelectOption,

Scrolling long content of dialog

When dialogs become too long for the user’s viewport or device, the content of the DialogContent will be scrollable.

import { WarningOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Button,
  Dialog,
  DialogAction,
  DialogContent,
  DialogHeader,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function ScrollDialog() {

<body> scroll and return focus

• By default, main content area is dimmed and scrolling is disabled. You can control scrolling behavior using the lockscroll prop.

• When a dialog is open, returnFocus prop determines whether the focus should be returned to the element that initiated the dialog or if the current screen position should be preserved.

• Default value for both lockScroll and returnFocus are true.

  Toggle Dialog

  Source Code

  Copy Code

  import {
    Button,
    Dialog,
    DialogAction,
    DialogContent,
    DialogHeader,
    Text,
  } from '@ocean-network-express/magenta-ui/react';
  import React from 'react';
  
  export function ScrollableBodyAndReturnFocus() {
    const [open, setOpen] = React.useState(false);

  Show More

Accessibility

Dialog component follows WAI-ARIA recommendations on accessibility.

Roles, States, and Properties

Dialog is a regular div[role="dialog"] element. It has states and props as follows:

• Dialog has aria-modal attribute set to true.
• Dialog has aria-labelledby attribute set to the id of the DialogHeader component.
• Dialog has aria-describedby attribute set to the id of the DialogContent component.

Keyboard interactions