Dialog

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription } from "@line/abc-def-react/dialog";

<script setup lang="ts">
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription } from "@line/abc-def-vue/dialog";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@line/abc-def-react/dialog";
import { Button } from "@line/abc-def-react/button";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild><Button>Open dialog</Button></DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit token</DialogTitle>
          <DialogDescription>Change a scoped CSS variable.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

<script setup lang="ts">
import { Button } from "@line/abc-def-vue/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@line/abc-def-vue/dialog";
</script>

<template>
  <Dialog>
    <DialogTrigger :as-child="true">
      <Button>Open dialog</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Edit token</DialogTitle>
        <DialogDescription>
          Change a scoped CSS variable.
        </DialogDescription>
      </DialogHeader>
    </DialogContent>
  </Dialog>
</template>

Component tokens

Composition exports

Usage notes

• Use for focused tasks.
• Keep long flows on full pages when possible.
• Related component tokens use the `dialog` token group in `@line/abc-def-styles/css`.