Components

Bottom Sheet

Bottom sheets surface content or actions from the bottom of the viewport, typically on smaller screens.

Stable

Anatomy

import {BottomSheet} from '@staffbase/design';

<BottomSheet.Root>
  <BottomSheet.Trigger />
  <BottomSheet.Popup>
    <BottomSheet.Header>
      <BottomSheet.Back />
      <BottomSheet.Title />
      <BottomSheet.Description />
      <BottomSheet.Close />
    </BottomSheet.Header>
    <BottomSheet.Action />
  </BottomSheet.Popup>
</BottomSheet.Root>

API reference

Root

Inherits props fromBase UI Drawer Root

Groups all parts of the bottom sheet and manages its open state.

Trigger

Inherits props fromBase UI Drawer Trigger

Name	Type	Description
`children`	`ReactNode`	Opens the bottom sheet when activated. Must be a button element.

Inherits props fromBase UI Drawer Popup

Renders the sheet surface, including the backdrop, drag handle, and content area.

Name	Type	Description
`children`	`ReactNode`	The content of the bottom sheet.
`container`	`HTMLElementRefObject<HTMLElement>`	Use this instead of z-index to specify another parent element to render the sheet portal into. Default is the document body.

Header

Renders a <div> that lays out the back button, title, description, and close button.

Name	Type	Description
`children`	`ReactNode`	The header content, typically a title, description, and close or back buttons.

Back

Renders a <button> with a leading caret icon for navigating to a previous step.

Name	Type	Description
`aria-label`	`string`	An accessible label for the back button, since it has no visible text.

Title

Inherits props fromBase UI Drawer Title

Renders an <h2> element that labels the bottom sheet.

Name	Type	Description
`children`	`ReactNode`	A heading that labels the bottom sheet.

Description

Inherits props fromBase UI Drawer Description

Renders a <p> element with additional information about the bottom sheet.

Name	Type	Description
`children`	`ReactNode`	A description that provides additional context for the bottom sheet.

Close

Inherits props fromBase UI Drawer Close

Renders a <button> with a close icon that dismisses the bottom sheet.

Name	Type	Description
`aria-label`	`string`	An accessible label for the close button, since it has no visible text.

Action

Renders a <button> for the primary action of the bottom sheet.

Name	Type	Description
`children`	`ReactNode`	The label of the action button.