Skip to content

[Feature Request]: Add support for custom split-panel toggle icon in SplitPanel / AppLayout #4059

@bearded-impala

Description

@bearded-impala

Description

Problem

Currently, Cloudscape’s split-panel toggle (in SplitPanel or via the splitPanel slot in AppLayout) uses a built-in default icon. There is no public API prop to override this icon. This limitation reduces flexibility for teams who want to:

  • Use a domain-specific or custom icon that better reflects their product workflow.
  • Align the toggle icon with brand design or metaphor (e.g., a “panel” icon, a “sidebar” icon, or a custom SVG).
  • Use different icons in different contexts (e.g., a “collapse” vs “expand” arrow, or a custom icon when panel is closed vs open).

While theming currently supports coloring of the layout toggle buttons (via color[Text|Background]LayoutToggle[State] tokens) :contentReference[oaicite:5]{index=5}, it doesn’t support changing the shape / SVG of those icons.

Proposal

  • Introduce a new prop on SplitPanel (or via the splitPanel slot of AppLayout), such as toggleIcon or toggleIconNode, that accepts a React node.
  • Optionally, also support collapsedIcon and expandedIcon props so that different icons can be provided for different states.

Code of Conduct

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions