or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-inputs.mddata-display.mddatetime.mdform-components.mdindex.mdlayout.mdnavigation.mdoverlay.mdprogrammatic.mdutilities.md
tile.json

programmatic.mddocs/

Programmatic APIs

Programmatic APIs allow you to create and control overlay components (dialogs, toasts, notifications, etc.) dynamically from JavaScript without requiring template declarations.

Dialog API

Create alert, confirm, and prompt dialogs programmatically.

class DialogProgrammatic {
  alert(params: string | DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
  confirm(params: DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
  prompt(params: DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
}

interface DialogOpenParams {
  title?: string;
  message?: string | VNode | (string | VNode)[];
  icon?: string;
  iconPack?: string;
  hasIcon?: boolean;
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  size?: 'is-small' | 'is-medium' | 'is-large';
  confirmText?: string;
  cancelText?: string;
  canCancel?: boolean | string[];
  onConfirm?: (value: string, dialog: DialogInstance) => void;
  onCancel?: (method: ModalCancellableOption) => void;
  hasInput?: boolean;
  inputAttrs?: object;
  trapFocus?: boolean;
  autoFocus?: boolean;
  container?: string;
}

interface DialogProgrammaticInstance {
  close(): void;
}

Usage example:

import { DialogProgrammatic } from "buefy";

// Simple alert
DialogProgrammatic.alert('Operation completed successfully!');

// Confirmation dialog
DialogProgrammatic.confirm({
  title: 'Delete Item',
  message: 'Are you sure you want to delete this item?',
  type: 'is-danger',
  onConfirm: () => {
    // Handle confirmation
    deleteItem();
  }
});

// Prompt dialog
DialogProgrammatic.prompt({
  title: 'Enter Name',
  message: 'What is your name?',
  inputAttrs: {
    placeholder: 'Your name',
    maxlength: 50
  },
  onConfirm: (value) => {
    console.log('Name entered:', value);
  }
});

// With promise handling (if configured)
const result = await DialogProgrammatic.confirm({
  message: 'Save changes?'
});
if (result) {
  saveChanges();
}

Toast API

Display temporary notification messages.

class ToastProgrammatic {
  open(params: string | ToastOpenParams): ToastProgrammaticInstance;
}

interface ToastOpenParams {
  message?: string | VNode | (string | VNode)[];
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  position?: NoticePosition;
  duration?: number;
  queue?: boolean;
  indefinite?: boolean;
  pauseOnHover?: boolean;
  container?: string;
  onClose?: () => void;
}

interface ToastProgrammaticInstance {
  close(): void;
}

Usage example:

import { ToastProgrammatic } from "buefy";

// Simple toast
ToastProgrammatic.open('Data saved successfully!');

// Custom toast
ToastProgrammatic.open({
  message: 'Upload completed',
  type: 'is-success',
  duration: 4000,
  position: 'is-top-right',
  onClose: () => {
    console.log('Toast closed');
  }
});

// Indefinite toast (manual close)
const toast = ToastProgrammatic.open({
  message: 'Processing...',
  type: 'is-info',
  indefinite: true
});

// Close programmatically
setTimeout(() => {
  toast.close();
}, 5000);

Modal API

Create modal dialogs with custom content.

class ModalProgrammatic {
  open(params: string | ModalOpenParams): ModalProgrammaticInstance;
}

interface ModalOpenParams {
  content?: string | VNode | (string | VNode)[];
  component?: Component;
  props?: object;
  events?: object;
  width?: string | number;
  hasModalCard?: boolean;
  animation?: string;
  canCancel?: boolean | string[];
  scroll?: ModalScrollBehavior;
  fullScreen?: boolean;
  trapFocus?: boolean;
  autoFocus?: boolean;
  customClass?: string;
  container?: string;
  onCancel?: (method: ModalCancellableOption) => void;
}

interface ModalProgrammaticInstance {
  close(): void;
}

Usage example:

import { ModalProgrammatic } from "buefy";

// Simple content modal
ModalProgrammatic.open({
  content: '<p>This is modal content!</p>',
  hasModalCard: true
});

// Component modal
ModalProgrammatic.open({
  component: MyCustomComponent,
  props: {
    title: 'Custom Modal',
    data: someData
  },
  events: {
    confirm: (result) => {
      console.log('Modal confirmed:', result);
    }
  },
  trapFocus: true
});

Notification API

Display persistent notification messages with actions.

class NotificationProgrammatic {
  open(params: string | NotificationOpenParams): NotificationProgrammaticInstance;
}

interface NotificationOpenParams {
  message?: string | VNode | (string | VNode)[];
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  position?: NoticePosition;
  duration?: number;
  queue?: boolean;
  indefinite?: boolean;
  pauseOnHover?: boolean;
  hasIcon?: boolean;
  icon?: string;
  iconPack?: string;
  autoClose?: boolean;
  container?: string;
  onClose?: () => void;
}

interface NotificationProgrammaticInstance {
  close(): void;
}

Usage example:

import { NotificationProgrammatic } from "buefy";

// Success notification
NotificationProgrammatic.open({
  message: 'Profile updated successfully!',
  type: 'is-success',
  hasIcon: true,
  duration: 4000
});

// Error notification with manual close
NotificationProgrammatic.open({
  message: 'Failed to save changes. Please try again.',
  type: 'is-danger',
  indefinite: true,
  hasIcon: true
});

Snackbar API

Display brief messages with optional actions.

class SnackbarProgrammatic {
  open(params: string | SnackbarOpenParams): SnackbarProgrammaticInstance;
}

interface SnackbarOpenParams {
  message?: string | VNode | (string | VNode)[];
  type?: 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 
         'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
  position?: NoticePosition;
  duration?: number;
  queue?: boolean;
  indefinite?: boolean;
  pauseOnHover?: boolean;
  actionText?: string;
  container?: string;
  onAction?: () => void;
  onClose?: () => void;
}

interface SnackbarProgrammaticInstance {
  close(): void;
}

Usage example:

import { SnackbarProgrammatic } from "buefy";

// Simple snackbar
SnackbarProgrammatic.open('Item deleted');

// Snackbar with action
SnackbarProgrammatic.open({
  message: 'Item deleted',
  actionText: 'Undo',
  onAction: () => {
    restoreItem();
  },
  duration: 6000
});

Loading API

Display full-screen or container loading overlays.

class LoadingProgrammatic {
  open(params?: LoadingOpenParams): LoadingProgrammaticInstance;
}

interface LoadingOpenParams {
  container?: HTMLElement | string;
  isFullPage?: boolean;
  animation?: string;
  canCancel?: boolean;
  onCancel?: () => void;
}

interface LoadingProgrammaticInstance {
  close(): void;
}

Usage example:

import { LoadingProgrammatic } from "buefy";

// Full-page loading
const loading = LoadingProgrammatic.open({
  isFullPage: true
});

// Close after operation
performAsyncOperation().finally(() => {
  loading.close();
});

// Container-specific loading
const containerLoading = LoadingProgrammatic.open({
  container: '#my-container',
  isFullPage: false
});

Global Configuration

Programmatic components respect global configuration options:

// Configure default behavior
app.use(Buefy, {
  defaultProgrammaticPromise: true, // Enable promise-based APIs
  defaultToastPosition: 'is-bottom-right',
  defaultNotificationPosition: 'is-top-right',
  defaultToastDuration: 4000,
  defaultNotificationDuration: 5000
});

Access via Vue Instance

Programmatic APIs are available through the Vue instance:

// In a component
export default {
  methods: {
    showAlert() {
      this.$buefy.dialog.alert('Hello World!');
    },
    showToast() {
      this.$buefy.toast.open('Operation successful');
    }
  }
}