GkBottomSheet

A bottom sheet built on GkOverlay: v-model, scrim, Escape / scrim dismiss (unless persistent), transitionName="gk-bottom-sheet" (scrim fades, panel slides up), full-width surface with top-rounded corners, and optional inset padding from the viewport edges.

This is intentionally smaller than Vuetify’s VBottomSheet: no VDialog prop proxy beyond what GkOverlay already provides, no separate contentClass merge API — use attributes on the root or extend styles via tokens.

When to use

Use for bottom-anchored mobile-first action surfaces, short task pickers, or contextual actions that should not fully block page context.

Live Examples

Basic bottom sheet

Use a bottom sheet for short mobile-first contextual tasks.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { GkBottomSheet, GkButton } from 'god-kit/vue'

const open = ref(false)
</script>

<template>
  <GkButton type="button" @click="open = true">Bottom sheet</GkButton>
  <GkBottomSheet
    v-model="open"
    aria-labelledby="sheet-basic-title"
    aria-describedby="sheet-basic-desc"
  >
    <h2 id="sheet-basic-title" class="title">GkBottomSheet</h2>
    <p id="sheet-basic-desc" class="text">
      Anchored to the bottom with a slide-up transition.
    </p>
    <GkButton type="button" variant="secondary" @click="open = false">
      Close
    </GkButton>
  </GkBottomSheet>
</template>

<style scoped>
.title {
  margin: 0 0 var(--gk-space-2);
  font-size: var(--gk-font-size-md);
}

.text {
  margin: 0 0 var(--gk-space-4);
  color: var(--gk-color-text-muted);
}
</style>

Best practice: Provide aria-labelledby and a close button; sheets still need clear escape routes.

Inset sheet

Inset mode adds viewport edge breathing room.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { GkBottomSheet, GkButton } from 'god-kit/vue'

const open = ref(false)
</script>

<template>
  <GkButton type="button" variant="secondary" @click="open = true">
    Inset sheet
  </GkButton>
  <GkBottomSheet v-model="open" inset aria-labelledby="sheet-inset-title">
    <h2 id="sheet-inset-title" class="title">Inset</h2>
    <p class="text">Inset sheets keep horizontal padding from viewport edges.</p>
    <GkButton type="button" @click="open = false">Close</GkButton>
  </GkBottomSheet>
</template>

<style scoped>
.title {
  margin: 0 0 var(--gk-space-2);
  font-size: var(--gk-font-size-md);
}

.text {
  margin: 0 0 var(--gk-space-4);
  color: var(--gk-color-text-muted);
}
</style>

Best practice: Use inset when the sheet contains controls that should not touch the screen edge.

Scrollable content

Constrain tall sheets with maxHeight and scrollable.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { GkBottomSheet, GkButton } from 'god-kit/vue'

const open = ref(false)
</script>

<template>
  <GkButton type="button" variant="secondary" @click="open = true">
    Scrollable sheet
  </GkButton>
  <GkBottomSheet
    v-model="open"
    scrollable
    :max-height="360"
    aria-labelledby="sheet-scroll-title"
  >
    <h2 id="sheet-scroll-title" class="title">Scrollable sheet</h2>
    <p v-for="n in 10" :key="n" class="text">
      Option {{ n }} - long content remains inside the sheet surface.
    </p>
    <GkButton type="button" @click="open = false">Close</GkButton>
  </GkBottomSheet>
</template>

<style scoped>
.title {
  margin: 0 0 var(--gk-space-2);
  font-size: var(--gk-font-size-md);
}

.text {
  margin: 0 0 var(--gk-space-3);
  color: var(--gk-color-text-muted);
}
</style>

Best practice: For long content, keep the close or primary action reachable inside the scrollable region.

API

Props

Prop	Type	Default	Description
modelValue	boolean	false	Open state; use v-model
inset	boolean	false	Adds horizontal padding around the sheet (see gk-overlay--inset on GkOverlay)
scrollable	boolean	true	overflow-y: auto on the surface when content exceeds max-height
persistent	boolean	false	Passed to GkOverlay
to	string | HTMLElement	'body'	Teleport target
zIndex	number | string	--gk-bottom-sheet-z-index	Stack order
showScrim	boolean	true	Passed to GkOverlay
restoreFocus	boolean	true	Passed to GkOverlay
maxHeight	string | number	—	Optional surface max-height (numbers become px)

Additional attributes (aria-labelledby, aria-describedby, etc.) are forwarded to GkOverlay (panel element).

Slots

Slot	Description
default	Sheet body

Events

Event	Payload	Description
update:modelValue	boolean	Open state
click:outside	MouseEvent	Scrim click (GkOverlay)
afterEnter	—	Transition finished entering
afterLeave	—	Transition finished leaving

Tokens

Token	Purpose
--gk-bottom-sheet-z-index	Default stacking (2400)
--gk-bottom-sheet-max-height	Default max-height on the surface (90vh)
--gk-bottom-sheet-shadow	Panel shadow

Try It

Change common bottom-sheet options, preview the result, and copy generated Vue code.

inset scrollable persistent showScrimmaxHeight

vue

<script setup lang="ts">
import { ref } from 'vue'
import { GkBottomSheet, GkButton } from 'god-kit/vue'

const open = ref(false)
</script>

<template>
  <GkButton type="button" @click="open = true">Open sheet</GkButton>
  <GkBottomSheet
    v-model="open"
    scrollable
    max-height="420px"
    aria-labelledby="sheet-title"
  >
    <h2 id="sheet-title">Sheet title</h2>
    <p>Sheet content.</p>
  </GkBottomSheet>
</template>

...

Accessibility notes

• Provide aria-labelledby for sheet title regions.
• Keep a clear close action when using persistent.
• For long content, prefer scrollable to keep controls reachable on small screens.

Related components

• GkOverlay
• GkDialog
• GkSnackbar

Out of scope (v1)

Activator slot, VDialog-style prop filtering, router back, and global overlay stack.