Button

Description

The Button AEM component is designed to be used only within AEM. It uses properties that come directly from the dialog options in the authoring interface. It handles styling possibilities and accessibility features based on the button type and link behavior (external, overlay, etc.).

The regular label comes from the link model.

Component

Properties

Prop	Type	Description	Optional
linkModel	LinkModel	Configuration object for the button’s link behavior	❌
styleIds	StyleId[]	Array of style IDs to determine button appearance. These values come from the styling choice in the author (primary, secondary, tertiary)	✅
id	string	Unique identifier for the button element	✅
mobileLabel	string	Alternative text label for mobile devices (≤576px)	✅
accessibilityLabel	string	Custom ARIA label for screen readers	✅
opensInNewWindowLabel	string	Screen reader text for links that open in new windows. This label should come from i18n	✅

Example

import type { AEMComponentProperties } from '@dcx-be/aem-react-components';
import { ButtonAem } from '@tmedxp/aem-react-components/atoms/button';

import type { ButtonModel } from './types/button.model';

const Button = ({ model }: AEMComponentProperties<ButtonModel>) => {
  return (
    <ButtonAem
      linkModel={model.linkModel}
      styleIds={model.styleIds}
      id={model.id}
      mobileLabel={model.mobileLabel}
      accessibilityLabel={model.accessibilityLabel}
      opensInNewWindowLabel={'a11yOpensInNewWindow'}
    />
  );
};

export { Button };

Storybook

• Try the Button AEM component in storybook: https://stunning-adventure-o796gr1.pages.github.io/aem-react-components/?path=/docs/aem-react-components-atoms-button—docs