Returnless UI

Dialog ​

Dialogs are overlays that require users to take an action before they can continue interacting with the rest of the application. They can be disruptive and should be used thoughtfully and sparingly.

Usage ​

js
<script lang="ts" setup>
import {
  Dialog,
  DialogCancelButton, 
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Button,
} from '@returnless/focus-ui';

const dialogOpen = ref(false);
</script>

<template>
  <Button @click="dialogOpen = true">
    Open Dialog
  </Button>
  <Dialog :open="dialogOpen" @cancel="dialogOpen = false">
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Are you absolutely sure?</DialogTitle>
        <DialogDescription>
        This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </DialogDescription>
      </DialogHeader>
      <DialogFooter>
        <DialogCancelButton>Cancel</DialogCancelButton>
        <Button variant="primary">Continue</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Dialog with icon ​

js
<script lang="ts" setup>
import {
  Button,
  Dialog,
  DialogCancelButton, 
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogIcon,
  DialogTitle,
} from '@returnless/focus-ui';

const dialogOpen = ref(false);
</script>

<template>
  <Button @click="dialogWithImageOpen = true">
    Open Dialog
  </Button>
  <Dialog :open="dialogWithImageOpen" @cancel="dialogWithImageOpen = false">
    <DialogContent>
      <DialogHeader>
        <DialogIcon source="https://assets.returnless.co/e59b52af-0b13-42d4-856e-28de255a8fec/img/integrations/shopify-plus-logo.svg" alt="Shopify" />
        <DialogTitle>Create coupon</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
        </DialogDescription>
      </DialogHeader>
      <DialogSection>
        <Form>
          <FormLayout>
            <TextField label="Coupon value" />
          </FormLayout>
        </Form>
      </DialogSection>
      <DialogFooter>
        <DialogCancelButton>Cancel</DialogCancelButton>
        <Button variant="primary">Continue</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Best practices ​

Use dialogs for confirmations and conditional changes. They should be thought of as temporary and not be used for information or actions that need to live on the UI in a persistent way. If the user needs to interact with the application directly on a resource, it's accepted to use a dialog to hide complex forms or actions specifically for sub-resource interaction.