Dialog

A modal dialog with backdrop, keyboard trap, and focus management. Supports a footer slot for actions. Emits

open and close events.

Playground

Open dialog

Controls

Size

Open

Heading

Title

No Close Button

Close On Backdrop Click

Close On Escape

Uppercase

Backdrop Blur

Elevation

Appearance

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-button variant="primary" id="open-btn">Open dialog</lt-button>

<lt-dialog id="my-dialog" heading="Confirm action" size="sm">
<lt-text>Are you sure you want to proceed?</lt-text>
<div slot="footer">
  <lt-button variant="neutral" appearance="outlined" id="cancel-btn">
    Cancel
  </lt-button>
  <lt-button variant="primary">Confirm</lt-button>
</div>
</lt-dialog>

<script type="module">
const dialog = document.getElementById('my-dialog');
document.getElementById('open-btn').addEventListener('click', () => dialog.open = true);
document.getElementById('cancel-btn').addEventListener('click', () => dialog.open = false);
</script>

import { useState } from 'react';
import { Dialog, Button, Text } from '@latty-ds/react';

function Example() {
const [open, setOpen] = useState(false);
return (
  <>
    <Button variant="primary" onClick={() => setOpen(true)}>
      Open dialog
    </Button>
    <Dialog
      open={open}
      heading="Confirm action"
      size="sm"
      onClose={() => setOpen(false)}
    >
      <Text>Are you sure you want to proceed?</Text>
      <div slot="footer">
        <Button variant="neutral" appearance="outlined"
          onClick={() => setOpen(false)}>Cancel</Button>
        <Button variant="primary">Confirm</Button>
      </div>
    </Dialog>
  </>
);
}

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
<lt-button variant="primary" @click="open = true">Open dialog</lt-button>

<lt-dialog :open="open" heading="Confirm action" size="sm"
@close="open = false">
<lt-text>Are you sure you want to proceed?</lt-text>

<div slot="footer">
<lt-button variant="neutral" appearance="outlined"
@click="open = false">Cancel</lt-button>
<lt-button variant="primary">Confirm</lt-button>
</div>
</lt-dialog>

</template>

API