React

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>> or <React.AnchorHTMLAttributes<HTMLAnchorElement>> depending on the as prop, which means it includes all standard HTML attributes that can be applied to an HTML Button or Anchor 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)	✅
isGhost	boolean	Display the button with ghost style	✅
as	'button' | 'link'	Render as button (default) or anchor element	✅
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} isGhost={true} />
  );
};

export { IconButtonExample };

Link example

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

const SocialFollowExample = () => {
  return (
    <IconButton
      as="link"
      href="https://twitter.com/toyota"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Follow us on Twitter"
      iconName="twitter"
      size="md"
    />
  );
};

export { SocialFollowExample };