HomeStarbucks Pattern Library



Expander animates the height of its children to an expanded or collapsed state based on the value of the isExpanded prop.

There are two effects for showing/hiding content as the Expander animates, which are passed as props:

  • reveal (default) -> Content is revealed top-down (ie. top is seen first)
  • pushdown -> Content is pushed down into view (ie. bottom is seen first)

Note: The SimpleExpander (see below) builds on top of Expander; it provides out of the box logic for toggling the expanded state and handles accessibility concerns.


  • childrennode
  • expandEffectoneOf('reveal', 'pushdown')['reveal']

    How the content appears as the expander animates open

  • isExpandedbool[false]

Example: Expander with a controller button



A simplified interface for the Expander component. Renders a toggle element and Expander containing passed in children. SimpleExpander toggles the expanded state when the toggle is clicked, and handles ARIA attributes appropriately.

All props applied to the component are passed down to the underlying Expander, allowing for usage of that component's prop API.

SimpleExpander includes three methods to change the current expanded state of the component. If you need to programmatically change the expanded state, assign the SimpleExpander to a ref and call these methods from the parent component.

  • openExpander()
  • closeExpander()
  • toggleExpander()


  • childrennode
  • initiallyExpandedbool[false]

    The expanded state of the component when it is initially rendered.

  • renderTogglefunc*

    A callback to render a toggle element. Receives the current isExpanded state of the component as a parameter.



A styled expander that utilizes IconButton and a Heading to open and close expanded content. Expander defaults as closed.

Note: uses React Hooks--requires React 16.8.0 with other React dependencies updated.


  • childrennode

    Content to render once expanded. Should be valid JSX or HTML.

  • headingTextany

    The text for the heading. Can be a string or component, is wrapped in a Heading component.

  • headingProps
    shape {

    Props to pass through to Heading, including tagName, size, className, etc. See Heading for more info.

  • headingWrapperClassNamestring

    Applied to div surrounding Heading and Caret button.

  • classNamestring

    Styling applied to the entire expander

  • ariaExpandButtonLabelstring

    Label for button that indicates expander functionality.

  • expandedByDefaultbool[false]

    A boolean that determines if the expander should be expanded by default.