BaseDialog
components/dialogs/BaseDialog.vue — Foundation dialog wrapping v-dialog > v-card. Provides a dark-blue title bar, scrollable body slot, and a standard footer with secondary + primary action buttons. Props: title, maxWidth (default 570), actionText, actionColor, cancelText, disabled, loading, persistent. Slots: default (body), #actions (override footer). All specific dialogs build on top of this.
Default — two-button footer
The standard pattern: secondary "No thanks" on the left, primary action on the right.
Disabled action button
Action button receives disabled when form is incomplete (e.g. checkbox not checked, email not entered).
Error action color (action-color="error")
Destructive actions (delete, remove, withdraw) use red for the primary button.
SimpleBaseDialog
components/dialogs/SimpleBaseDialog.vue — Modern dialog variant with rounded corners (30px border-radius) and generous padding. Same props as BaseDialog but with a cleaner, card-like appearance. Used by DialogPaymentMethod.
| Prop | Type | Default |
|---|---|---|
title | string | required |
maxWidth | string | "570" |
actionText | string | "Accept" |
actionColor | ButtonColor | — |
cancelText | string | "No thanks" |
disabled | boolean | false |
loading | boolean | false |
persistent | boolean | false |
Confirm your action
This is the content area of SimpleBaseDialog. It uses a modern rounded design with more padding than BaseDialog.
DialogLeavePage
components/dialogs/DialogLeavePage.vue — Confirms navigation away from a page with unsaved changes. max-width="480", persistent.
DialogDeleteDocuments
components/dialogs/DialogDeleteDocuments.vue — Batch-delete confirmation. Props: count, loading. Action button is red. max-width="632".
Single document
Multiple documents (count=5)
DialogDeclineSR
components/dialogs/DialogDeclineSR.vue — Decline a signature request with an optional message. Props: isDeleteEnabled, loading, messageMaxLength (default 1000). Custom #actions slot with optional delete checkbox. max-width="510".
Without delete option
By declining, the document owner will be notified. You can leave an optional message explaining your decision.
Message (optional)
With delete checkbox (isDeleteEnabled=true)
By declining, the document owner will be notified. You can leave an optional message explaining your decision.
Message (optional)
DialogWithdraw
components/dialogs/document/DialogWithdraw.vue — Withdraw a document from signing. Optional message textarea + delete-from-account checkbox. Both action buttons are red. max-width="510".
The document will be withdrawn from all signers. Signers who have already signed will be notified.
Message (optional)
DialogRemoveSigner
components/dialogs/document/DialogRemoveSigner.vue — Remove a signer from a document. Props: email, isLastSigner. Shows a warning banner when removing the last signer.
Regular signer
You are about to remove anna.schmidt@example.com from the signing request. They will be notified by email.
Last signer — with warning banner
You are about to remove john.doe@example.com from the signing request. They will be notified by email.
DialogAddSigner
components/dialogs/document/DialogAddSigner.vue — Add one or more signers via email autocomplete. Action disabled until at least one email entered. Props: loading.
Enter the email address of the person you want to add as a signer.
DialogAddObserver
components/dialogs/document/DialogAddObserver.vue — Add observers who receive a copy of the completed document. Email autocomplete, multi-select. Props: loading.
Observers receive a copy of the signed document but cannot sign it themselves.
DialogAddSignerGroup
components/dialogs/document/DialogAddSignerGroup.vue — Pick a pre-configured signer group to add to a document. Shows groups with member previews. No action button — selecting a row triggers the action. Shows loading spinner or empty state when no groups exist. max-width="640".
With groups (happy path)
Select a signer group to add all its members as signers.
Empty state — no signer groups created yet
You have no signer groups yet.
Go to Settings › Signer Groups to create your first group.
DialogDelegate
components/dialogs/document/DialogDelegate.vue — Delegate signing rights to another person. Requires a valid email address; optional message. Action disabled until email is valid. Props: loading.
Transfer your signing role to another person. They will receive an invitation to sign the document in your place.
Email address
Message (optional)
Important: once delegated, you will no longer be able to sign this document yourself.
DialogTanEntry
components/dialogs/document/DialogTanEntry.vue — Enter a 6-digit TAN code sent by SMS to complete a signing step. Props: loading, mailData. Action disabled until 6 digits entered. Includes resend link. max-width="640".
We sent a 6-digit code to your mobile phone. Enter it below to complete your signature.
Enter your code
Didn't receive the code? Resend code
DialogTermsOfUse
components/dialogs/document/DialogTermsOfUse.vue — Accept legal terms before signing. Dynamic title based on NAS mode. Supports Skribble and/or Swisscom checkboxes with links. Privacy policy note at bottom. Props: loading, terms (Set), policies (Set). max-width="640".
Standard (Skribble terms only)
By clicking "Accept" you agree to the following terms of use required to sign this document.
NAS mode (Skribble + Swisscom terms)
DialogTermsAndConditions
components/dialogs/document/DialogTermsAndConditions.vue — XQES-specific legal consent dialog. Parent checkbox selects all three nested checkboxes (Skribble, ZERTES, eIDAS). Accept is disabled until all three are checked.
By clicking "Accept" you agree to the terms required to use qualified electronic signatures.
DialogUpgradeStandards
components/dialogs/document/DialogUpgradeStandards.vue — Prompts signer to increase their signature standard (SES → AES → QES). Props: quality, legislation, lang, showImage, to, closable. Custom #actions slot. max-width="640".
This document requires a higher signature standard
This document requires a Qualified Electronic Signature (QES) under Swiss law (ZertES).
What do I need to do?
To increase your signature standard, you need to verify your identity with a valid identity document. The process takes about 5 minutes.
DialogVisualSignatureData
components/dialogs/document/DialogVisualSignatureData.vue — Let the signer set the name that appears in their visual signature on the document. Both name fields are optional. max-width="630".
Specify the name to display in your visual signature on the document. These fields are optional.
DialogSupplyEidData
components/dialogs/document/DialogSupplyEidData.vue — Enter mobile phone number for eID-based signing flow. Action disabled until phone number passes validation. Props: loading. max-width="630".
Enter the mobile number associated with your eID. A verification code will be sent to this number.
DialogAcceptTerms (GTC scenario 3)
components/dialogs/DialogAcceptTerms.vue — New-user GTC acceptance dialog. Custom #actions slot (no standard footer). Image shown on desktop. Props: loading, businessName. max-width="640", persistent.
By accepting, I consent to the processing of my personal data as described in the Privacy Policy.
DialogBusinessInvitation
components/dialogs/business/DialogBusinessInvitation.vue — Shown when a user is invited to join a business account. Accepts the GTC for joining. Props: loading, businessName. Custom actions slot. max-width="640", persistent.
You have been invited to join Acme Corp on Skribble. By joining, you will be added to the team and can collaborate on documents.
By accepting, you agree to the Terms of Use and acknowledge the Privacy Policy.
DialogBusinessDowngraded
components/dialogs/business/DialogBusinessDowngraded.vue — Shown to admins and members when a business account has been downgraded. Requires GTC checkbox acceptance before the user can proceed. Props: loading, isAdmin. max-width="720", persistent.
Your Business account has been downgraded. You can continue using Skribble with the free plan features.
DialogBusinessLockedMember
components/dialogs/business/DialogBusinessLockedMember.vue — Shown when the business is locked (trial expired or failed payments). Lists admin contacts so the member can reach out. Props: loading. max-width="796", persistent.
Your company's Business plan is no longer active. Please contact one of the admins below to reactivate the plan.
DialogMigratedToStarter
components/dialogs/business/DialogMigratedToStarter.vue — Shown when a member's account is migrated to the Starter plan. GTC checkbox required. Feature cards shown on desktop. Props: loading. max-width="796", persistent.
What changes for you?
Your account has been moved to the Skribble Starter plan. You can continue signing documents for free and pay only for qualified signatures when you need them.
Free to sign simple documents anytime
Pay per use for qualified signatures
DialogWelcomeToStarterPlan
components/dialogs/business/DialogWelcomeToStarterPlan.vue — Welcome screen shown after migrating to Starter. Full custom layout with feature cards (no standard BaseDialog header). max-width="700", scrim "skribbleu", scrollable.
Your Business trial has ended, but you can keep signing. Here's what your Starter plan includes:
Free to sign — sign documents with a simple electronic signature at no cost
Pay per use — pay only when you need a qualified signature
DialogCancelTrial
components/dialogs/business/DialogCancelTrial.vue — Confirm cancellation of a Business trial. Shows different text for Chargebee trials vs legacy trials. Props: loading. Bound via v-model. max-width="510".
Legacy trial (with downgrade item list)
Are you sure you want to cancel your Business trial? You will lose access to:
- Advanced signature standards (AES, QES)
- Team management features
- Business branding and API access
DialogCancelSubscription
components/dialogs/business/DialogCancelSubscription.vue — Cancel an active Business subscription. Shows expiry date in text. Two variants: team subscription vs individual subscription. Props: endDate, individual, isLoading. max-width="632".
Team subscription
Your subscription will remain active until 31 December 2025. After that date you will lose access to:
- Advanced signature standards (AES, QES)
- Team management features
- Business branding and API access
Individual subscription
Your subscription will remain active until 31 December 2025. After that date you will lose access to:
- Unlimited simple signatures
- Access to advanced and qualified signatures
- Priority support
DialogFreePlanDowngrade
components/dialogs/business/DialogFreePlanDowngrade.vue — Downgrade from Business to Free plan. Title and text are dynamic based on Chargebee trial state. Props: loading. max-width="510".
After downgrading you will no longer have access to Business features. The following will be affected:
- Advanced signature standards (AES, QES)
- Team management features
- Business branding and API access
DialogRemoveMembers
components/dialogs/business/DialogRemoveMembers.vue — Remove one or multiple members from a business. Shows singular/plural text. Props: count, loading. max-width="500".
Single member
Multiple members (count=3)
DialogRemoveSeats
components/dialogs/business/DialogRemoveSeats.vue — Enter the number of seats to remove at next billing cycle. Includes numeric input, info banner, and validation. Props: maxSeatsDelta, endDate. max-width="632".
Seat changes take effect after your current billing period ends on 31 December 2025.
DialogAddMember
components/dialogs/business/DialogAddMember.vue — Add business members via email autocomplete (multi-select). Fetches existing members and filters out those already assigned. Props: members (current), loading, title, subtitle, cancelText. Min-width 500px.
Select members from your business account to add them to this team.
DialogActivateAutoDeletion
components/dialogs/DialogActivateAutoDeletion.vue — Activate auto-deletion of signed documents. Consent checkbox required to enable the action button. Has legacy variant with different body text. Props: modelValue (v-model), isLegacy. max-width="600".
Standard (non-legacy)
Documents will be automatically deleted after they are fully signed. This action cannot be undone for already-deleted documents.
With consent given (checkbox checked)
Documents will be automatically deleted after they are fully signed. This action cannot be undone for already-deleted documents.
DialogDeactivateAutoDeletion
components/dialogs/DialogDeactivateAutoDeletion.vue — Simple confirmation to turn off auto-deletion. No checkbox required. Destructive action (red button). Props: modelValue (v-model). max-width="600".
After deactivating, signed documents will no longer be automatically deleted. Existing documents are not affected.
DialogConnectIdAustria
components/dialogs/DialogConnectIdAustria.vue — Connect the user's account to ID Austria for QES. Props: modelValue, isDirectSign. max-width="510".
DialogEidNotFound
components/dialogs/DialogEidNotFound.vue — Shown when no valid eID was found during the identification flow. Single "Got it" action button on the right. Custom #actions slot.
We could not find a valid electronic ID for your account. Please ensure you have a supported eID and try again. Learn more about supported eIDs
DialogStopSelfObserve
components/dialogs/DialogStopSelfObserve.vue — Remove yourself as an observer from a document. Destructive action. Props: loading. max-width="632".
DialogDeleteSignature
components/dialogs/visual-signature/DialogDeleteSignature.vue — Delete a saved visual signature from the profile. Props: loading. max-width="510".
DialogDeleteAccount
components/dialogs/profile/DialogDeleteAccount.vue — Permanently delete a user account. Requires explicit checkbox consent before the red action button activates. Image shown on desktop. Props: loading. max-width="640".
Without consent (button disabled)
Your account and all associated data will be permanently deleted. This action cannot be undone.
With consent given
Your account and all associated data will be permanently deleted. This action cannot be undone.
DialogLeaveBusiness
components/dialogs/profile/DialogLeaveBusiness.vue — Leave a business account from the profile settings. Title and body text reference the business name. Image shown on desktop. Props: loading. max-width="640".
Are you sure you want to leave Acme Corp?
You will lose access to all business features and documents shared within Acme Corp. You can be re-invited by an admin at any time.
DialogDeleteSignerGroup
components/dialogs/signer-groups/DialogDeleteSignerGroup.vue — Confirm deletion of a signer group. Title includes group name. Body explains side effects with bold emphasis. Props: groupName. max-width="580".
Deleting this group will remove all members from the group and cancel all pending signature requests where this group is referenced.
Documents that have already been fully signed are not affected.
DialogPart11Info
components/dialogs/DialogPart11Info.vue — Collect signer name and reason for 21 CFR Part 11 compliance. Both fields are required; action disabled until form is valid. Illustration on right. Props: name, reason, loading. max-width="700".
This document requires your full name and the reason for signing as part of 21 CFR Part 11 compliance.
DialogTransactionalCsat
components/dialogs/business/DialogTransactionalCsat.vue — Post-cancellation feedback survey. Six checkbox options + free-text area. Submit disabled until at least one option or free text is provided. Skip button always enabled. max-width="640".
Your feedback helps us make Skribble better for everyone.
DialogRelationshipCsat
components/dialogs/DialogRelationshipCsat.vue — Periodic satisfaction survey. Three variants based on satisfaction prop: "positive", "neutral", "negative". Checkbox options differ per variant, plus free-text. max-width="640", persistent, scrollable.
Positive variant
Tell us what you enjoy about Skribble.
Negative variant
Help us understand what we can improve.
DialogFairFlatMigration
components/dialogs/DialogFairFlatMigration.vue — Migrate from Fair Flat to Business plan. Two actions: migrate (primary) or switch to free (text link). Image on right. Props: loading. Full custom layout (no BaseDialog). max-width="796", persistent.
Skribble Business includes everything you need:
- Unlimited users and seats
- Advanced team management
- Priority support and SLA
By migrating you accept the General Terms & Conditions and the Data Processing Agreement.
Not interested? Switch to free plan instead
DialogFreeMigration
components/dialogs/DialogFreeMigration.vue — Migrate from Fair Flat to the free plan. Shows what is excluded from the free plan. Single primary action. Image on right. Props: loading. Full custom layout. max-width="796", persistent.
The following features are not included in the free plan. See full comparison
- Unlimited simple signatures
- Advanced team management
- Business branding
By switching you accept the General Terms & Conditions and the Data Processing Agreement.
You can upgrade to Business at any time.
DialogPaymentMethod
components/dialogs/DialogPaymentMethod.vue — View/update payment method. Uses SimpleBaseDialog. Shows payment card info, bank account (SEPA), and billing address via PaymentInfoCard components. Opens Chargebee portal for editing. Single "Close" action button.
Payment details
DialogAddPaymentMethod
components/dialogs/DialogAddPaymentMethod.vue — Add/update payment method during checkout. Uses BaseDialog with Chargebee PaymentElement widget. Shows plan summary with price. Props: intent, address, selection, seats, coupon, loading. max-width="570".
(card number, expiry, CVC)