ExpandButton

Small square toggle button for expand/collapse actions; shows Plus when collapsed and Minus when expanded, and reflects state via aria-expanded. Import from "@desk/ui/components/expand-button". This is an icon-only control, so pass an aria-label (or aria-labelledby) describing the action (e.g. "Expand row") — without it screen readers announce an unlabelled button.

Usage

import { ExpandButton, ExpandButtonProps, PlusMinusMorphIcon, PlusMinusMorphIconProps } from "@desk/ui/components/expand-button";

Best practices

Always pass an aria-label (e.g. "Expand row") — it's icon-only, so without one screen readers announce an unlabelled button.
Drive the icon and aria-expanded with the expanded prop; set expandedIcon/collapsedIcon only to override the default Minus/Plus pair.

Props

ExpandButton

Prop	Type	Default	Description
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl" \| null \| undefined`
expanded	`boolean`	`false`	Whether the button shows its expanded state; drives the icon and `aria-expanded`.
expandedIcon	`ExpandButtonIcon`	`Minus`	Icon shown while expanded.
collapsedIcon	`ExpandButtonIcon`	`Plus`	Icon shown while collapsed.

PlusMinusMorphIcon

Prop	Type	Default	Description
expanded	`boolean`	`false`	Whether the control shows its expanded (Minus) state.
expandedIcon	`MorphIcon`	`Minus`	Icon shown while expanded.
collapsedIcon	`MorphIcon`	`Plus`	Icon shown while collapsed.

Also exports

typeExpandButtonProps
typePlusMinusMorphIconProps

Composition

Used by

DataGrid, ProductCard