Dialog

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <div className="flex justify-center">
    <UI.DialogV2.Root>
      <UI.DialogV2.Trigger asChild>
        <UI.Button type="button" kind="outline" size="sm">
          Open Dialog
        </UI.Button>
      </UI.DialogV2.Trigger>
      <UI.DialogV2.Content>
        <UI.DialogV2.Header title="Dialog Example" description="This is a dialog component" />

        <UI.DialogV2.ButtonGroup>
          <UI.DialogV2.Close asChild>
            <UI.Button type="button" kind="ghost" size="md">
              Cancel
            </UI.Button>
          </UI.DialogV2.Close>
          <UI.Button type="button" kind="solid" size="md">
            Confirm
          </UI.Button>
        </UI.DialogV2.ButtonGroup>
      </UI.DialogV2.Content>
    </UI.DialogV2.Root>
  </div>
)

Usage

The Dialog is a modal component that provides a mobile-friendly way to display additional content or actions. It slides up from the bottom of the screen on mobile and from the center of the screen on desktop with a backdrop overlay.

By default, the order of the buttons on mobile is reversed. You can prevent this by setting the reverseOnMobile prop to false on ButtonGroup.

API