Develop

Styles

Schemes

<button class="tng-icon-button" aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-outlined" aria-label="Bookmark">
  <i class="tng-icon icon-bookmark" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-ghost" aria-label="External link">
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
</button>

Default

Contrast

Sizes

The default size is sm.

<button class="tng-icon-button is-sm" aria-label="Search">
  <i class="tng-icon icon-search" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-md" aria-label="Calendar">
  <i class="tng-icon icon-calendar" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-lg" aria-label="Confirm">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
</button>

Default

Contrast

States

<button class="tng-icon-button" disabled aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>
<button
  class="tng-icon-button is-outlined"
  disabled
  aria-label="External link"
>
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
</button>
<button
  class="tng-icon-button is-ghost"
  disabled
  aria-label="External link"
>
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
</button>

Default

Contrast

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