Icon Button

Description

The Icon Button is an interactive component that wraps an icon inside a button element. It supports event handling, accessibility, making it suitable for actions in menus, carousel, overlay, etc.

Component

Properties

Icons reference icons. The IconButtonProperties extends <React.HTMLAttributes<HTMLButtonElement> which means it includes all standard HTML attributes that can be applied to an HTML Button element.

Prop	Type	Description	Optional
iconName	ToyotaIcon | LexusIcon	The rendered Icon inside button component from the library	❌
size	Size	Defines the size of the button	✅
isOutlined	boolean	Display the button with outlined style (no border, no background-color)	✅
isNeutral	boolean	Display the button with neutral style	✅
className	ClassValue	Custom classNames you want to apply on the button element	✅
screenReaderText	string	Accessibility label used for screen readers	✅

Example

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

const IconButtonExample = () => {
  return (
    <IconButton
      iconName="travel"
      size="lg"
      isOutlined={true}
      isNeutral={true}
    />
  );
};

export { IconButtonExample };

Storybook

• Try the Icon Button component in storybook:

Figma

• Check out the Icon Button component in figma: https://www.figma.com/design/BMP7JhfVGX3h47BvUD0xXj/03-Components?node-id=5702-15824&m=dev