Function: completion()

function completion(props: UiCompletionProps): Element;

Defined in: src/UI/blocks/completion.tsx:109

Completion component for displaying completion status with optional icon, title, description, and status list.

Parameters

Parameter	Type	Description
props	UiCompletionProps	Configuration object

Returns

Element

Examples

Basic usage with static title and description

completion({
  title: 'Task Completed Successfully',
  description: 'All operations have been completed without errors.'
});

Usage with dynamic title depending on other fields

completion({
  title: ({data}) => `Welcome back, ${data.userName}! Your task is complete.`,
  description: 'Thank you for using our service.'
});

Usage with custom icon and status list

completion({
  title: 'Data Processing Complete',
  description: 'All files have been processed successfully.',
  icon: <IconCircleCheckFilled size={80} strokeWidth={1} />,
  statusList: [
    { value: 'success', label: 'Data validation completed' },
    { value: 'success', label: 'Files uploaded successfully' },
    { value: 'warning', label: 'Some optional fields were empty' }
  ]
});

Usage with dynamic icon depending on other fields

completion({
  title: 'Task Complete',
  description: 'Your task has finished.',
  icon: ({data}) => {
    if (data.taskType === 'success') return <IconCircleCheck size={80} strokeWidth={1} />;
    if (data.taskType === 'warning') return <IconAlertTriangle size={80} strokeWidth={1} />;
    return <IconCircleCheckFilled size={80} strokeWidth={1} />;
  }
});

Usage with dynamic statusList depending on other fields

completion({
  title: 'Operation Complete',
  description: 'Results are ready.',
  statusList: ({data}) => {
    const items = [];
    if (data.processedFiles > 0) {
      items.push({ value: 'success', label: `${data.processedFiles} files processed` });
    }
    if (data.errors > 0) {
      items.push({ value: 'error', label: `${data.errors} errors found` });
    }
    return items;
  }
});

Usage with custom text alignment

completion({
  title: 'Task Completed',
  description: 'All operations finished successfully.',
  titleAlign: 'center',
  descriptionAlign: 'left'
});

Usage with callout in description

completion({
  title: 'Action Required',
  description: ':::warning\nPlease review the changes before proceeding.\n:::\nClick Continue to confirm.',
  descriptionAlign: 'left'
});