Confirm Dialog

Overview

The Confirm Dialog component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

This component provides a reusable, accessible primitive for confirm-dialog use cases within the Byteion design system.

Mental model

When to use

When not to use

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

import { useState } from 'react';
import { Button, ConfirmDialog } from '@byteion/react';

export default function ConfirmDialogDemo() {
  const [open, setOpen] = useState(true);

  return (
    <div className="p-6">
      <Button tone="danger" onClick={() => setOpen(true)}>Delete project</Button>
      <ConfirmDialog
        open={open}
        tone="danger"
        title="Delete project?"
        description="This action cannot be undone. All project data will be permanently removed."
        confirmLabel="Delete"
        cancelLabel="Cancel"
        onCancel={() => setOpen(false)}
        onConfirm={() => setOpen(false)}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from 'vue';
import { Button, ConfirmDialog } from '@byteion/vue';

const open = ref(true);
</script>

<template>
  <div class="p-6">
    <Button tone="danger" @click="open = true">Delete project</Button>
    <ConfirmDialog
      v-model="open"
      tone="danger"
      title="Delete project?"
      description="This action cannot be undone. All project data will be permanently removed."
      confirm-label="Delete"
      cancel-label="Cancel"
      @confirm="open = false"
      @cancel="open = false"
    />
  </div>
</template>

States

This component reacts seamlessly to the following interaction and data states:

• open — Component is expanded or visible.
• closed — Component is collapsed or hidden.
• loading — Action in progress — spinner replaces icon, button is disabled.
• disabled — Non-interactive — grayed out, cursor not-allowed.

Anatomy

Usage guidelines

• Follow the design system tokens.
• Maintain consistent spacing.

Do and Don't

Accessibility

This component follows standard ARIA patterns for its role. Keyboard interaction matches the native HTML element behavior.

Customization

Override visual appearance by modifying variables.css or Tailwind utility classes.

import { cva, cn, type VariantProps } from '@byteion/react';

const myConfirmDialog = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myConfirmDialog>;

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const myConfirmDialog = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => myConfirmDialog({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX

API Reference

No custom data attributes required. Uses standard HTML attributes.

export interface ConfirmDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
  open?: boolean;
  title: string;
  description?: string;
  actions?: ReactNode;
  onConfirm?: () => void;
  onCancel?: () => void;
  confirmLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
  disabled?: boolean;
  tone?: 'neutral' | 'danger' | 'destructive' | 'warning' | 'info' | 'success';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  showIcon?: boolean;
  icon?: ReactNode;
  titleId?: string;
  descriptionId?: string;
}

export interface ConfirmDialogProps {
  modelValue?: boolean;
  open?: boolean;
  title: string;
  description?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
  disabled?: boolean;
  tone?: 'neutral' | 'danger' | 'destructive' | 'warning' | 'info' | 'success';
  size?: 'sm' | 'md' | 'lg' | 'xl';
  showIcon?: boolean;
}

Developer tips

Common mistakes

Production usage tips

Premium examples

Advanced patterns available in Byteion Pro:

Related components

• Modal
• Alert