How to make a modal with a top-left close icon?

[sneko]

Hi,

I saw some examples like that for Material Design:

But didn't see any option in the v-dialog to have the close icon by default. Any example to make the thing the most clean?

Thank you,

[sneko]

Hmmmm the "nesting dialog" (https://vuetifyjs.com/en/components/dialogs/#nesting) samples show a way to have an icon in the corner:

      <v-dialog
        v-model="dialog3"
        max-width="500px"
      >
        <v-card>
          <v-card-title>
            <span>Dialog 3</span>
            <v-spacer></v-spacer>
            <v-menu
              bottom
              left
            >
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, i) in items"
                  :key="i"
                  @click="() => {}"
                >
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-card-title>
          <v-card-actions>
            <v-btn
              color="primary"
              text
              @click="dialog3 = false"
            >
              Close
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

That's not the easiest way just for a closing thing, but will be fine :)

[MND13]

All it needed was the <v-spacer></v-spacer> tag before the close icon

   <v-card-title>Dialog Title
                  <v-spacer></v-spacer>
                 <v-btn icon @click="dialog = false" >
                  <v-icon>mdi-close</v-icon>
                </v-btn>
              </v-card-title>

[jesus0alejo]

Hola. Encontré una manera de resolverlo así, introduciendo una etiqueta <v-sheet> dentro de <v-card> antes de <v-card-text>

Hello. I found a way to solve it like this by inserting a <v-sheet> tag inside the <v-card> tag before the <v-card-text> tag.

<v-dialog v-model="dAgregar" width="600px">
          <v-card>
            <v-sheet>
              <v-card-item>
                <template v-slot:prepend>
                  <v-card-title>
                    Agregar Dirección
                  </v-card-title>
                </template>
                <v-divider class="mx-2" vertical></v-divider>
                <template v-slot:append>
                  <v-btn
                      icon="$close"
                      size="large"
                      variant="text"
                      @click="dAgregar = false, lmpFrm()"
                  >
                  </v-btn>
                </template>
              </v-card-item>
            </v-sheet>

            <v-card-text>