Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
DocumentationOrganismsHeaderHeaderMenuToggleButton

HeaderMenuToggleButton

HeaderMenuToggleButton is a sub-component of the Header organism.

It is used to allow the user to toggle the menu.

Basic Usage

import { HeaderMenuToggleButton } from '@krakentech/coral-organisms';
 
<HeaderMenuToggleButton closedText="Menu" openText="Back" />

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};
closedTextstring

The label displayed inside the button when the menu is closed.

openTextstring

The label displayed inside the button when the menu is open.

Last updated on
HeaderLogoNavigationHeaderNavMenu