Button

import { Button, ButtonRail, IconTintColor } from '@wearables-ui-toolkit/mrbd';
import type { IconSource } from '@wearables-ui-toolkit/mrbd';

type ComposeActionsProps = {
  replyIcon: IconSource;
  reactIcon: IconSource;
  deleteIcon: IconSource;
  canDelete: boolean;
  onReply: () => void;
  onReact: () => void;
  onDelete: () => void;
};

export function ComposeActions({
  replyIcon,
  reactIcon,
  deleteIcon,
  canDelete,
  onReply,
  onReact,
  onDelete,
}: ComposeActionsProps) {
  return (
    <ButtonRail>
      <Button icon={replyIcon} title="Reply" onClick={onReply} />
      <Button icon={reactIcon} title="React" onClick={onReact} />
      <Button
        icon={deleteIcon}
        title="Delete"
        iconTintColor={IconTintColor.NEGATIVE}
        disabled={!canDelete}
        onClick={onDelete}
      />
    </ButtonRail>
  );
}

<Button
  avatarSrc={contact.photoUrl}
  avatarAlt={contact.name}
  title={contact.name}
  subtitle="Call"
  alwaysShowText
  onClick={() => call(contact)}
/>

import { Button, TooltipMode } from '@wearables-ui-toolkit/mrbd';

<Button
  icon={moreIcon}
  ariaLabel="More options"
  tooltipText="More options"
  tooltipMode={TooltipMode.FOCUSED}
  onClick={openMenu}
/>;

import { Button, TrailingTag } from '@wearables-ui-toolkit/mrbd';

<Button
  icon={translateIcon}
  title={feature.displayName}
  trailingTag={TrailingTag.BETA}
  enforceMaxWidth
  onClick={openFeature}
/>;

<Button
  icon={sendIcon}
  title="Send"
  disabled={!isDraftValid}
  tooltipText="Add a message first"
  tooltipMode={TooltipMode.DISABLED_CLICK}
  onClick={send}
/>

import { useRef } from 'react';
import { Button } from '@wearables-ui-toolkit/mrbd';
import type { ButtonHandle } from '@wearables-ui-toolkit/mrbd';

const buttonRef = useRef<ButtonHandle>(null);

async function send() {
  await postMessage();
  buttonRef.current?.animateActionTransition({
    endingIcon: checkIcon,
    endingTitle: 'Sent',
  });
}

<Button ref={buttonRef} icon={sendIcon} title="Send" onClick={send} />;

• The button renders with role="button", takes a focus stop (tabIndex is 0 by default), and activates on Enter, Space, and pointer click.
• The accessible name comes from the rendered title and subtitle text. For a button with no text — icon-only or avatar-only — you must supply ariaLabel or the standard aria-label; when both are present, aria-label wins.
• Icons are decorative and hidden from assistive technology, and the trailing tag is hidden as well, so anything they communicate must also be in the label.
• avatarAlt labels the avatar image; pass a localized string.
• Disabled buttons remain reachable so their tooltip can be read; they report aria-disabled rather than disappearing from the focus order.
• subtitle is part of the accessible name, so keep it meaningful rather than using it for decoration.

• Keep labels short, verb-led, and specific about what the next press does.
• An accessible outcome label is required for every icon-only action. Add a focused tooltip when the glyph is unfamiliar.
• Let the button size itself; shorten copy instead of constraining the control.
• Use enforceMaxWidth when the label comes from data outside application control.
• Use avatar mode when a person or entity is the identity of the action.
• Use disabled for unavailable actions instead of silently dropping the handler.
• Keep a focused button mounted when its command changes state. Updating it in place preserves focus.

• Avoid stretching the button through grid or flex layout rules; preserve its component-owned width and flex sizing.
• Avoid placing peer buttons in an uncoordinated layout. ButtonGroup and ButtonRail provide the expected spacing, focus travel, and overflow behavior.
• Avoid animating scale or opacity on a wrapper because the component already owns focus and press motion.
• Avoid combining an icon and avatar, and treat showIconActiveIndicator as a supplement to an accessible label rather than a replacement for one.
• Avoid customizing internal icon margins, glyph size, or generated class names; these details are not public customization surfaces.
• Avoid animateActionTransition for ordinary declarative state updates. It is intended for imperative action changes.