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

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" color="secondary">
      Cancel
    </Button>

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

Open modal Modal content Cancel Ok

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" color="destructive">
  Delete my account ...
</Button>

<Modal v-model="isOpen" title="Delete account?">
  <template #alert>
    <Alert color="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" color="secondary">
      Keep my account
    </Button>
    <Button color="destructive" @click="isOpen = false">
      I understand. Delete my account now!
    </Button>
  </template>
</Modal>

<Button @click="isOpen6 = true" color="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="isOpen6 = false" color="secondary"> Keep my account <Button color="destructive" @click="isOpen6 = 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

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