Develop

Styles

The main button component with three visual variants for different emphasis levels.

<button class="tng-button">Button</button>
<a class="tng-button" href="#">Button</a>

Default
Contrast

Button

Schemes

The default scheme is primary.

<button class="tng-button is-primary">Primary</button>
<button class="tng-button is-secondary">Secondary</button>
<button class="tng-button is-tertiary">Tertiary</button>
<button class="tng-button is-tertiary is-ghost">
  Tertiary Ghost
</button>

Default
Contrast

Sizes

The default size is lg.

<button class="tng-button is-sm">Small</button>
<button class="tng-button is-md">Medium</button>
<button class="tng-button is-lg">Large</button>

Default
Contrast

States

<button class="tng-button is-primary" disabled>Primary</button>
<button class="tng-button is-secondary" disabled>Secondary</button>
<button class="tng-button is-tertiary" disabled>Tertiary</button>
<button class="tng-button is-tertiary is-ghost" disabled>
  Tertiary Ghost
</button>

Default
Contrast

Icons

<button class="tng-button is-primary">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
  <span>Download</span>
</button>
<button class="tng-button is-secondary">
  <span>Save</span>
  <i class="tng-icon icon-bookmark" aria-hidden="true"></i>
</button>
<button class="tng-button is-tertiary">
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
  <span>External Link</span>
</button>

Default
Contrast

Overflow

You can set overflow limitation on a button just like any other element by using the overflow utility class.

<button class="tng-button">
  <div class="tng-overflow-ellipsis">…</div>
</button>

React

Description

The Button is one of the most important interactive elements in the design system. It enables users to take action — for example, saving changes, submitting a form, or moving forward in a process.

There are two main ways a Primary Button can appear:

As a Button: used when the action happens within the same page (e.g. opening a modal, submitting data).
As a Link styled as a Button: used when the action takes the user to another page or an external website.

The Tertiary Button includes an optional underline that can be toggled on or off through the boolean property “isGhost”. This ensures consistent behaviour and appearance while simplifying maintenance and documentation across Figma and development.

Component

Properties

ButtonProperties extends <React.ButtonHTMLAttributes<HTMLButtonElement>> which means it includes all standard HTML attributes that can be applied to a button element.

Prop	Type	Description	Optional
`text`	`string`	The text label displayed inside the pill button	❌
`buttonStyle`	`'primary' \| 'secondary' \| 'tertiary'`	The button style, `'primary'` by default	✅
`buttonSize`	`'sm' \| 'md' \| 'lg'`	Defines the size of the button, `'md'` by default	✅
`buttonType`	`'button' \| 'link'`	Defines the type of node to render	❌
`trailingIcon`	`ToyotaIcon \| LexusIcon`	Icon displayed after the text	✅
`leadingIcon`	`ToyotaIcon \| LexusIcon`	Icon displayed before the text	✅
`isGhost`	`boolean`	Indicates if the tertiary button has the underline style	✅
`className`	`ClassValue`	Custom class names applied to the button element	✅

Example

import { Button } from '@tmedxp/react-components';

const ButtonExample = () => {
  return <Button buttonType="button" text="Main Button" />;
};

export { ButtonExample };

React AEM

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 };