Modal

A blocking dialog for a decision the page cannot continue without.

Default

Bind open state with v-model:active. active and open are aliases.


        
          1
          
          <Button size="small" @click="open = true">Open Modal</Button>
        

          2
          
           
        

          3
          
          <Modal v-model:active="open">
        

          4
          
            <ModalBody>
        

          5
          
              <ModalHeader>
        

          6
          
                <ModalTitle>Create Token</ModalTitle>
        

          7
          
                <ModalSubtitle>
        

          8
          
                  Enter a unique name so you can tell this token apart later.
        

          9
          
                </ModalSubtitle>
        

          10
          
              </ModalHeader>
        

          11
          
              <Input v-model="tokenName" size="small" label="Token Name" placeholder="ci-deploy" />
        

          12
          
            </ModalBody>
        

          13
          
            <ModalActions>
        

          14
          
              <ModalAction variant="secondary" @click="open = false">Cancel</ModalAction>
        

          15
          
              <ModalAction @click="open = false">Create Token</ModalAction>
        

          16
          
            </ModalActions>
        

          17
          
          </Modal>

Sticky

sticky pins the header and actions while ModalBody scrolls. Use it when the copy is longer than the viewport.


        
          1
          
          <Modal v-model:active="open" sticky>
        

          2
          
            <ModalBody>
        

          3
          
              <ModalHeader>
        

          4
          
                <ModalTitle>Create Token</ModalTitle>
        

          5
          
              </ModalHeader>
        

          6
          
              <!-- long body -->
        

          7
          
            </ModalBody>
        

          8
          
            <ModalActions>
        

          9
          
              <ModalAction variant="secondary" @click="open = false">Cancel</ModalAction>
        

          10
          
              <ModalAction @click="open = false">Create Token</ModalAction>
        

          11
          
            </ModalActions>
        

          12
          
          </Modal>

Inset

ModalInset is a recessed band for a field or a preview. last drops the bottom border when it sits on the actions.


        
          1
          
          <ModalInset>
        

          2
          
            <p>Content within the inset.</p>
        

          3
          
          </ModalInset>
        

          4
          
          <div class="pt-5">
        

          5
          
            <p>Content outside the inset.</p>
        

          6
          
          </div>

Disabled and full width

Disable the primary until the form is valid. full-width stretches a single acknowledgment action.


        
          1
          
          <ModalAction disabled>Create Token</ModalAction>
        

          2
          
          <ModalAction full-width>Done</ModalAction>

Initial focus

initial-focus-ref moves first focus onto a control. Pass a component instance or an HTMLElement.


        
          1
          
          <Modal v-model:active="open" :initial-focus-ref="submitAction">
        

          2
          
            <ModalActions>
        

          3
          
              <ModalAction variant="secondary">Cancel</ModalAction>
        

          4
          
              <ModalAction ref="submitAction">Create Token</ModalAction>
        

          5
          
            </ModalActions>
        

          6
          
          </Modal>

Best practices

Modal blocks the page. Persistent side context is a Sheet or Drawer. A dedicated create flow is a route, not a dialog.
Title is Title Case and a statement: Create Token, never a question. The primary button repeats that verb and noun.
Cancel stays the literal word Cancel. Acknowledgment-only dialogs use Done. Do not label either Close or OK.
Destructive confirms stay in a Modal. Default focus to Cancel so Enter cannot fire the delete.
Escape and outside click may dismiss a safe form. Gate them when the body has unsaved or irreversible input.