Sheet primitives

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

tsx

<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

Velvet disables an action only while the same state transition is already owned by the sheet. Your button must forward disabled; it must not invent a hydration-time disabled state and enable itself later.

asChild requirements

The single child receives the ref, click handler, disabled state, ARIA 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.

onPress and onClick

onPress is the public action callback on Sheet.Trigger. Normal DOM click props also forward. Keep state changes in one of them so the same gesture does not run application logic twice.