The BottomSheet component is a sliding panel that emerges from the bottom of the screen.
It is commonly used to display additional content or actions without navigating away from the current view.

• Sliding panel: Smooth animation from bottom of the screen.
• Overlay support: Dim the background and close on click.
• Variants: Supports different styles for drag handle (text, contained, outlined).
• Customizable content: Place any HTML, components, or interactive elements inside.
• Interactive: Can open, close, or toggle programmatically.

Usage Example

Preview

test

textcontainedoutlined

Code

<script lang="ts">
  import { BottomSheet, Button } from "@fefade-ui/svelte"
  import { onMount } from "svelte"

  let isOpen = $state(false)
  let variant = $state("")

  function handleOpen(s: string) {
    variant = s
    isOpen = !isOpen
  }

  function handleClose() {
    isOpen = false
  }

  onMount(() => {
    handleOpen("text")
  })
</script>

<BottomSheet.Overlay {isOpen} onclick={handleClose} style="z-index: 998;" />
<BottomSheet {isOpen} {handleClose}>
  <BottomSheet.DragButton variant={variant as any} />
  <BottomSheet.Content>
    <h1>test</h1>
  </BottomSheet.Content>
</BottomSheet>

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  {#each ["text", "contained", "outlined"] as variant (variant)}
    <Button
      onclick={() => {
        handleOpen(variant)
      }}
    >
      {variant}
    </Button>
  {/each}
</div>

Props

Prop	Type	Default	Description
isOpen	boolean	false	Controls whether the bottom sheet is visible.
handleClose	function	undefined	Callback function to close the bottom sheet.
variant	string	"text"	Visual style of the drag handle (text, contained, outlined).
Overlay	component	Optional	Background overlay to dim the screen and detect clicks.
Content	component	Optional	The main content of the bottom sheet.
DragButton	component	Optional	The draggable handle for opening/closing the sheet.

Best Practices

• Use the overlay to focus attention on the bottom sheet and allow easy dismissal.
• Keep content concise to avoid scrolling within the sheet if possible.
• Use appropriate variants for the drag handle to match UI style.
• Ensure interactive elements inside the sheet are accessible and focusable.
• Avoid opening multiple bottom sheets simultaneously to prevent user confusion.