Triggers and actions
Trigger, Close, and Step communicate intent directly and can render through your own button using asChild.
Trigger parts are real buttons by default and expose stateful intent without forcing a product button style.
Actions
| Component or action | Result |
|---|---|
Sheet.Trigger / action="open" | open at the requested or default detent |
action="close" / Sheet.Close | request closed |
action="toggle" | invert open state |
Sheet.Step direction="up" | next larger detent |
Sheet.Step direction="down" | next smaller detent |
Sheet.Step snapTo={n} | exact detent index |
<Sheet.Trigger asChild>
<Button>Open filters</Button>
</Sheet.Trigger>
<Sheet.Step direction="up">More</Sheet.Step>
<Sheet.Step snapTo={1}>Compact</Sheet.Step>
<Sheet.Close asChild><Button>Done</Button></Sheet.Close>Disabled state
Only the public disabled prop disables an action. A new open, close, toggle, or step intent may interrupt an active transition and continues from the rendered position.
asChild requirements
The single non-Fragment child receives the ref, children, click handler, disabled state, ARIA/data attributes, className, and style. Forward all of them. If the design system composes click handlers, respect event.defaultPrevented and do not silently replace Velvet's handler. See Bring your own components.
onPress and onClick
onClick runs first, then onPress, then Velvet changes state. Either callback may call event.preventDefault() to cancel the Velvet action. Keep application state changes in one callback so the same gesture does not run logic twice.