SuikunUIPre-Alpha

Components > Dialog

Dialog

A floating window that appears over the UI. It can be used to display a message or require a response from the user.

MDN dialog, Radix UI Dialog

import React from 'react'
import { Dialog } from '@components/ui/Dialog';
() => {

  return (

    <Dialog.Root>

      <Dialog.Trigger kind="primary">

        Open Dialog

      </Dialog.Trigger>

      <Dialog.Portal>

        <Dialog.Content>

          <Dialog.Close />

          <Dialog.Title>

            Dialog Title

          </Dialog.Title>

          <Dialog.Description>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam

            at ipsum eu nunc commodo posuere et sit amet ligula.

          </Dialog.Description>

        </Dialog.Content>

      </Dialog.Portal>

    </Dialog.Root>

  );

};

Installation

Install Radix UI's Dialog:

yarn add @radix-ui/react-dialog


# or
npm install @radix-ui/react-dialog

Copy and paste this Text primitive at components/ui/Text.tsx.

Copy and paste this Button primitive at components/ui/Button.tsx.

Copy and paste this Dialog primitive at components/ui/Dialog.tsx.

Anatomy

How to use all the parts together:

import { Dialog } from '@components/ui/Dialog';


export default () => (
  <Dialog.Root>
    <Dialog.Trigger />


    <Dialog.Portal>
      <Dialog.Content>
        <Dialog.Close />
        <Dialog.Title />
        <Dialog.Description />
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

Usage

Basic Usage of Dialog:

import { Dialog } from '@components/ui/Dialog';
<Dialog.Root>
  <Dialog.Trigger kind="danger">
    Open Dialog
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Content>
      <Dialog.Close />
      <Dialog.Title>
        Dialog Title
      </Dialog.Title>


      <Dialog.Description>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
        at ipsum eu nunc commodo posuere et sit amet ligula.
      </Dialog.Description>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>