Layout

Max height

Collapses overflowing content to a maximum height with an accessible expand control.

@dawn/ui/components/max-height

Preview

Rendered from @dawn/ui

Ada prefers morning appointments and needs step-free access. Please allow extra time for check-in and confirm the Garden room before the appointment.

Usage

import { MaxHeight } from "@dawn/ui/components/max-height";

export const PatientNotes = () => (
  <MaxHeight maxHeight="16rem" expandLabel="Expand notes" collapseLabel="Collapse notes">
    <p>Long-form patient notes…</p>
  </MaxHeight>
);

API

maxHeightCSSProperties['maxHeight']: Sets the collapsed content height.
expanded / defaultExpandedboolean: Controls or initializes the expanded state.
onExpandedChange(expanded: boolean) => void: Reports expand and collapse changes.

Exports

MaxHeightMaxHeightProps