Bottom sheet - EXPRESSO Docs

bottomSheet hosts content in a native bottom-sheet presentation. It is experimental and may change in a future runtime.

Properties

Property	Accepted value	Description
`visible`	`boolean`	Controlled visibility. Set it to `false` in `onDismiss`.
`skipPartiallyExpanded`	`boolean`	Starts fully expanded instead of using a half-expanded detent.
`onDismiss`	`() => void`	Called after swipe-down or scrim dismissal.
`style`	`StyleProperties`	Layout and appearance values.
`children`	`ReactNode`	Sheet content.
`key`	`string \| number`	React key for dynamic sheets.
`class`	`string`	Registered style name for this node only.

Example

const [visible, setVisible] = useState(false);

<column>
  <button text="Open filters" onClick={() => setVisible(true)} />
  <bottomSheet
    visible={visible}
    skipPartiallyExpanded
    onDismiss={() => setVisible(false)}
    style={{ padding: 20 }}
  >
    <column style={{ spacing: 16 }}>
      <text style={{ fontSize: 20, fontWeight: 700 }}>Filters</text>
      <button text="Apply" onClick={() => setVisible(false)} />
    </column>
  </bottomSheet>
</column>

Keep visible controlled so React state stays synchronized with native dismissal.