Skip to content
Components

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 "@instruments/materia-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 "@instruments/materia-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

PropTypeDefaultDescription
size"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined
expandedbooleanfalse

Whether the button shows its expanded state; drives the icon and aria-expanded.

expandedIconExpandButtonIconMinus

Icon shown while expanded.

collapsedIconExpandButtonIconPlus

Icon shown while collapsed.

PlusMinusMorphIcon

PropTypeDefaultDescription
expandedbooleanfalse

Whether the control shows its expanded (Minus) state.

expandedIconMorphIconMinus

Icon shown while expanded.

collapsedIconMorphIconPlus

Icon shown while collapsed.

Also exports

  • typeExpandButtonProps
  • typePlusMinusMorphIconProps

Composition

Used by

DataGrid