← All proposals

Menu Button

Starting point for a MenuButton proposal.

Extends a PDS componentOpen in Storybook

proposals/MenuButton/custom.md28 lines · View on GitHub

Custom and net-new: MenuButton

Everything in this proposal that is not plain PDS v2. npm run check:tokens reads this file: each net-new class, custom CSS variable and raw value found in the code must appear here in backticks.

Net-new components

None.

Additions to existing PDS components

  • On .pds-icon-button: .pds-icon-button--agentic
  • On .pds-menu-button: .pds-menu-button__item-check, .pds-menu-button__item-check--hidden
  • On .pds-nav-accordion: .pds-nav-accordion__content, .pds-nav-accordion__content--expanded, .pds-nav-accordion__toggle-icon

Net-new props

  • isAgentic: passed to the trigger.
  • isSelected on a menu item: shows a check on the selected option (used by Model Selector).

Custom CSS variables

  • --button-background-color — set on button.pds-button--subtle.pds-menu-button__trigger.pds-menu-button__trigger--navbar
  • --icon-button-fill — set on button.pds-menu-button__trigger--icon-only.pds-icon-button--agentic[aria-expanded='true'], button.pds-menu-button__trigger--icon-only.pds-icon-button--agentic[aria-expanded='true']:active

Raw values kept on purpose

None.