React Design System: component Dialog

Dialog

Dialogs present content overlaid over other parts of the UI.

Overview

API

Code

Component 'Dialog'

First, you need to import a component to your code (сheck component path is right):

import Dialog from "../../core/Dialog";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string = default

This prop set the shape of the component. Possible states: default | dense. The default state is default.

view

tring = filled

This prop set the view of the component. Possible states: filled | smooth | raised . The default state isfilled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

icon

string

Name of a icon to render in the dialog's header. Note that the header will only be rendered if title is provided. For example,"tick"

title

string

A title of the dialog.

text

string

Action text. Haven't default state.

backdropOpacity

number = 20

Opacity of backdrop. From 0 to 100 with step 10. The default state is 20.

leftButton

element

A Left button of a dialog.

rightButton

element

A Right button of a dialog.

isOpen

boolean

Toggles the visibility of the overlay and its children. This prop is required because the component is controlled.

onClose

func

A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the esc key.

  
  < Button
      view="filled"
      color="primary"
      text="Open Dialog"
      onClick={ () => setOpen(true) }
  / >
    < Dialog
      type={ default }
      view={ smooth }
      color={ primary }
      icon="info-sign"
      title="This is dialog"
      text={ text }
      backdropOpacity={ 40 }
      leftButton={
        < Button
          type="default"
          view="outlined"
          color="primary"
          dense={ false }
          onClick={ () => setOpen(false) }
          text="Maybe next time"
        / >
      }
      rightButton={
        < Button
          type="default"
          view="filled"
          color="primary"
          dense={ false }
          onClick={ () => setOpen(false) }
          text="Sure, continue!"
        / >
      }
      isOpen={ false }
      onClose={ () => setOpen(false) }
  />