Bottom Sheet

A mobile-optimized component that slides up from the bottom of the screen to display additional content or actions. Implements proper focus management and touch interactions, making it ideal for mobile interfaces where vertical space is limited.

Supports swipe gestures

Architecture

so-bottom-sheet
Slot: trigger You need to place an so-button here.
so-button
Slot: content
so-bottom-sheet-content
Slot: default
so-bottom-sheet-header
Slot: default
so-bottom-sheet-description
Slot: default
so-bottom-sheet-footer
Slot: default
so-bottom-sheet-button-secondary
Slot: default
so-bottom-sheet-button-primary
Slot: default

Reference

  • Bottom Sheet

    The root container that manages the state and behavior of the bottom sheet system. Coordinates the interaction between trigger and content components.

  • Content

    The container that holds the bottom sheet's content. Manages swipe gestures for intuitive touch-based dismissal.

  • Header

    The container for the bottom sheet's header section, containing the title and the close button.

  • Description

    The container for the bottom sheet's descriptive content, providing additional context or details about its purpose.

  • Footer

    The container for the bottom sheet's footer section, typically containing action buttons or controls.

  • Button Primary

    The primary action button for the bottom sheet, typically used for confirming or accepting the proposed action.

    • Events

      • onClick

        Event handler called when the primary button is clicked.

  • Button Secondary

    The secondary action button for the bottom sheet, typically used for canceling or dismissing the sheet.

    • Events

      • onClick

        Event handler called when the secondary button is clicked.

Keyboard

  • Enter

    When focus is on the trigger, opens the bottom sheet.

  • Space

    When focus is on the trigger, opens the bottom sheet.

made for toddle