Collapsible
One region shown or hidden by its own trigger. The mechanism under "show more" and section folding; the trigger states what will happen, never a bare chevron alone. The content reveals like the accordion: height over 200ms on ease-calm, and the rows fade and slide in a hair from the top.
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleContent>…</CollapsibleContent>
<CollapsibleTrigger asChild><Button variant="ghost" size="sm">Show 2 more</Button></CollapsibleTrigger>
</Collapsible>Show more
Three 40px rows always visible; two more behind the trigger. The label says what happens next; the rows slide in as the height opens.
- Match invoice #4471
- Categorize 12 expenses
- Flag anomaly in payroll run
Section
A ghost icon button, ChevronsUpDown, folds the section.