funkwhale/front/ui-docs/components/ui/modal.md

import Modal from "~/components/ui/Modal.vue";

Modal

Prop	Data type	Required?	Default	Description
title	string	Yes		The modal title
v-model	true | false	No		Whether the modal is isOpen or not

<Button @click="isOpen = true">
  Open modal
</Button>

<Modal v-model="isOpen" title="My modal">
  Modal content
</Modal>

Open modal Modal content

Modal actions

Use the #actions slot to add actions to a modal. Actions typically take the form of buttons.

Make sure to add autofocus to the preferred button.

<Button @click="isOpen = true">
  Open modal
</Button>

<Modal v-model="isOpen" title="My modal">
  Modal content

  <template #actions>
    <Button @click="isOpen = false">
      Cancel
    </Button>

    <Button autofocus @click="isOpen = false">
      Ok
    </Button>
  </template>
</Modal>

Open modal Modal content Cancel Ok

Alert inside modal

You can nest Funkwhale alerts to visually highlight content within the modal.

<Button @click="isOpen = true">
  Open modal
</Button>

<Modal v-model="isOpen" title="My modal">
  Modal content

  <template #alert v-if="alertOpen">
    <fw-alert>
      Alert content

      <template #actions>
        <Button autofocus @click="alertOpen = false">Close alert</Button>
      </template>
    </fw-alert>
  </template>
</Modal>

Open modal Modal content Alert content Close alert Cancel Ok

Destructive Modal

The destructive prop is used to visually indicate a potentially dangerous or irreversible action. When set to true, the modal will have a distinctive red styling to draw the user's attention and highlight the critical nature of the action.

Prop	Data type	Required?	Default	Description
destructive	true	No	false	Applies a red styling to emphasize dangerous actions

<Modal
  v-model="isOpen"
  title="Delete Account"
  destructive
>
  Dangerous action consequences
</Modal>

Delete Account Dangerous action consequences

Styling Effects

When the destructive prop is set to true, the modal will:

• Add a red border
• Style the title in red

To visually distinguish the modal from standard modals

Best Practices

• Use the destructive prop sparingly
• Clearly explain the consequences of the action unsing <Alert red>
• Provide a clear way to cancel the action
• Use descriptive action button labels

The example in the "Confirm a dangerous action" section demonstrates the recommended usage of the destructive modal.

<Modal
  v-model="isOpen"
  title="Delete Account?"
  destructive
>
  <template #alert>
    <Alert red>
      Detailed consequences of the action
    </Alert>
  </template>

  <template #actions>
    <Button @click="isOpen = false">
      Cancel
    </Button>
    <Button
      destructive
      @click="deleteAccount()"
    >
      Confirm Deletion
    </Button>
  </template>
</Modal>

Delete my account Detailed consequences of the action Cancel Confirm Deletion

Confirm a dangerous action

Note that confirmation dialogs interrupt the user's workflow. Consider adding a recovery functionality such as "undo" instead.

::: tip Read more about designing user experiences around dangerous actions:

• How to use visual signals and spacing to differentiate between benign and dangerous options

  If you need to implement dangerous actions, make sure to place them apart from other actions to prevent accidental clicks. Add contextual hints and information so that the user understands the consequences of the action.

• How to design a confirmation dialog

  1. Let the user confirm potentially destructive actions
  2. Do not use confirmation dialogs for routine tasks
  3. Be specific about the action and its potential consequences
  4. Label the response buttons with their result: "Delete my account" instead of "Yes"
  5. Make sure to give the user all information they need to decide

:::

<Button @click="isOpen = true" destructive>
  Delete my account ...
</Button>

<Modal v-model="isOpen" title="Delete account?">
  <template #alert>
    <Alert red>
1 082 music files that you uploaded will be deleted.<br />
7 879 items in your collections will be unlinked.
    </Alert>
  </template>
Do you want to delete your account forever?

You will not be able to restore your account.
  <template #actions>
    <Button autofocus @click="isOpen = false" >
      Keep my account
    </Button>
    <Button destructive @click="isOpen = false">
      I understand. Delete my account now!
    </Button>
  </template>
</Modal>

<Button @click="isOpen5 = true" destructive> Delete my account ... <template #alert> 1 082 music files that you uploaded will be deleted.
7 879 items in your collections will be unlinked. Do you want to delete your account forever?

You will not be able to restore your account. <template #actions> <Button autofocus @click="isOpen5 = false"> Keep my account <Button destructive @click="isOpen5 = false"> I understand. Delete my account now!

Nested modals

You can nest modals to allow users to isOpen a modal from inside another modal. This can be useful when creating a multi-step workflow.

<Button @click="isOpen = true">
  Open modal
</Button>

<Modal v-model="isOpen" title="My modal">
  <Modal v-model="isOpenNested" title="My modal">
    Nested modal content
  </Modal>

  <Button autofocus @click="isOpenNested = true">
    Open nested modal
  </Button>
</Modal>

Open modal Nested modal content Open nested modal