Icon Button

Icon buttons render an icon-only action without a visible text label. Use them sparingly where space is constrained and the icon is unambiguous.

Design

Icon Buttons are circular interactive elements that display a single icon to trigger an action or represent a state. They’re used when an action can be represented visually (e.g. Close, Play, Next) without the need for text.

Icon Buttons are always circular and available in two styles: Filled and Outlined. This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

When to use it (and when not to)

Use Icon Buttons for:

• Simple, universally recognisable actions (play, pause, close, next, previous).

Avoid Icon Buttons when:

• Use a standard Button when text is needed for clarity.
• Avoid ambiguous icons without a tooltip or accessible label.
• Don’t use Icon Buttons for navigation unless the icon’s meaning is clearly understood.

Quick summary of accessibility & consistency

• Minimum touch area: 24 × 24 px, recommended 44 × 44 px (WCAG 2.5.5, EN 301549).
• Must always include an ARIA label (e.g. “Close”, “Play video”).
• Maintain distinct hover and focus styles (not interchangeable).
• Icon Buttons are always circular and available in two styles: Filled and Outlined.

Properties

Type : Filled by State

Rested

Icon Button

Background color:

buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5

buttons-icon-button-filled-neutral-rested-fill-color#282830

Height: 80

Width: 80

Hover

Icon Button

Background color:

buttons-icon-button-filled-neutral-hover-fill-color#f5f5f5

buttons-icon-button-filled-neutral-hover-fill-color#6c7073

Active

Icon Button

Background color:

buttons-icon-button-filled-neutral-active-fill-color#f5f5f5

buttons-icon-button-filled-neutral-active-fill-color#282830

Border color:

buttons-icon-button-filled-neutral-active-border-color#000000

buttons-icon-button-filled-neutral-active-border-color#282830

Border weight: 1

Disabled

Icon Button

Background color:

buttons-icon-button-filled-neutral-disabled-fill-color#f5f5f5

buttons-icon-button-filled-neutral-disabled-fill-color#a8aaac

Focus

Icon Button

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Icon Button

Type: Filled

Type : Outlined by State

Rested

Icon Button

Border color:

buttons-icon-button-outlined-neutral-rested-border-color#999999

buttons-icon-button-outlined-neutral-rested-border-color#a8aaac

Height: 80

Width: 80

Border weight: 1

Hover

Icon Button

Background color:

buttons-icon-button-outlined-neutral-hover-fill-color#f5f5f5

buttons-icon-button-outlined-neutral-hover-fill-color#6c7073

Active

Icon Button

Background color:

buttons-icon-button-outlined-neutral-active-fill-color#000000

buttons-icon-button-outlined-neutral-active-fill-color#282830

Border color:

buttons-icon-button-outlined-neutral-active-fill-color#000000

buttons-icon-button-outlined-neutral-active-fill-color#282830

Disabled

Icon Button

Border color:

buttons-icon-button-outlined-neutral-disabled-border-color#666666

buttons-icon-button-outlined-neutral-disabled-border-color#6c7073

Border weight: 1

Focus

Icon Button

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Icon Button

Type: Outlined

Size

LG

Icon Button

Height: 80

Width: 80

Chevron_Right

Size: 40

MD

Icon Button

Height: 40

Width: 40

Chevron_Right

Size: 20

SM

Icon Button

Height: 32

Width: 32

Chevron_Right

Size: 20

Contrast

False

Icon Button

Background color:

buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5

buttons-icon-button-filled-neutral-rested-fill-color#282830

True

Icon Button

Background color:

buttons-icon-button-filled-contrast-rested-fill-colorrgba(0, 0, 0, 0.3)

buttons-icon-button-filled-contrast-rested-fill-color#ffffff

Background

True

Icon Button

Background color:

buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5

buttons-icon-button-filled-neutral-rested-fill-color#282830

False

Modes

Components

Toyota

Icon Button

Background color:

buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5

buttons-icon-button-filled-neutral-rested-fill-color#282830

Lexus

Icon Button

Background color:

buttons-icon-button-filled-neutral-rested-fill-color#f5f5f5

buttons-icon-button-filled-neutral-rested-fill-color#282830

Layout and spacing

Type: Filled, State: Rested

Icon Button

Direction: Horizontal

Alignment: Middle center

Vertical resizing: Fixed

Horizontal resizing: Fixed

Item spacing: 12

Padding: 8

Type: Filled, State: Focus

Icon Button

Direction: Horizontal

Alignment: Middle left

Vertical resizing: Hug

Horizontal resizing: Hug

Item spacing: 10

Padding: 4

Type: Outlined, State: Rested

Icon Button

Direction: Horizontal

Alignment: Middle center

Vertical resizing: Fixed

Horizontal resizing: Fixed

Item spacing: 10

Padding: 8

Styling

Colors

Name	Applied as	Applied to
buttons-icon-button-filled-contrast-rested-fill-color	Background color	Icon Button
buttons-icon-button-filled-contrast-rested-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-rested-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-rested-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-hover-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-hover-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-active-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-active-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-disabled-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-disabled-fill-color	Background color	Icon Button
buttons-icon-button-filled-neutral-rested-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-rested-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-hover-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-hover-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-active-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-active-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-disabled-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-neutral-disabled-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-rested-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-rested-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-hover-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-hover-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-active-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-active-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-disabled-foreground-color	Icon color	Icon Button
buttons-icon-button-filled-contrast-disabled-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-rested-border-color	Border color	Icon Button
buttons-icon-button-outlined-neutral-rested-border-color	Border color	Icon Button
buttons-icon-button-outlined-neutral-hover-fill-color	Background color	Icon Button
buttons-icon-button-outlined-neutral-hover-fill-color	Background color	Icon Button
buttons-icon-button-outlined-neutral-active-fill-color	Background color	Icon Button
buttons-icon-button-outlined-neutral-active-fill-color	Background color	Icon Button
buttons-icon-button-outlined-neutral-disabled-border-color	Border color	Icon Button
buttons-icon-button-outlined-neutral-disabled-border-color	Border color	Icon Button
buttons-icon-button-outlined-neutral-rested-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-rested-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-hover-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-hover-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-active-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-active-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-disabled-foreground-color	Icon color	Icon Button
buttons-icon-button-outlined-neutral-disabled-foreground-color	Icon color	Icon Button
color-border-focus-neutral-default	Border color	Icon Button
color-border-focus-neutral-default	Border color	Icon Button

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

Accessibility

Accessibility

Icon Buttons are interactive components that rely solely on visual cues (icons, outlines, and focus rings) to convey meaning. Because they don’t include text, ensuring accessibility through proper semantics, focus management, and colour contrast is essential.

For Design

Minimum touch area

To ensure accessibility and ease of interaction across devices, all interactive elements — including Icon Buttons — must respect a minimum touch target size.

Absolute minimum: 24 × 24 px — This is the lowest technical requirement referenced in accessibility standards (WCAG 2.5.5, EN 301549). It ensures the button can still be reached, but doesn’t guarantee an optimal experience for all users.

Recommended best practice: 44 × 44 px — Provides a comfortable interaction area for users with motor impairments, touch devices, or outdoor use. Should be considered the default requirement for Icon Buttons in our system.

The minimum target size applies regardless of the visual size of the icon or container. If the visual element is smaller (e.g. small icons or outlined variants), add invisible padding to meet the required target area. Maintain consistency across all sizes (LG, MD, SM) and across both styles (Filled / Outlined).

Guidance on how to use a component.

• Add invisible padding to meet the minimum touch size without altering the visual design.
• Ensure the button remains tappable and clearly identifiable in responsive layouts and mobile contexts.
• Keep spacing between Icon Buttons to at least one touch target (avoid overlapping targets).

Guidance on what to avoid when using a component.

• Don’t rely on the visible icon size to define the touch area.
• Don’t define interactive areas smaller than the minimum, even for small icons.
• Don’t cluster multiple Icon Buttons too closely, as this can make interaction difficult for users.

For Dev

To ensure Icon Buttons meet accessibility standards across platforms, follow this implementation checklist. These recommendations align with WCAG 2.2 AA and EN 301549, supporting keyboard navigation, screen readers, and assistive technologies.

1. Screen reader support
   • Use semantic <button> elements for all Icon Buttons.
   • Each button must include a descriptive aria-label that clearly communicates its purpose.
   • When used as toggles, add aria-pressed="true" or "false" to indicate the current state.
   • Avoid using decorative icons alone — hide them from assistive tech with aria-hidden="true".
   • Never use <div> or <span> elements styled as buttons, as they break keyboard semantics.
2. Keyboard navigation
   • Buttons must be focusable via Tab and activatable via Enter or Space.
   • Maintain a visible focus state at all times, consistent with the visual design.
   • Avoid intercepting default keyboard behaviour unless required (e.g. arrow keys for carousels).
   • Ensure sufficient contrast between link focus indicators and adjacent elements (minimum 3:1).
3. Motion sensitivity and feedback
   • Avoid any animations that trigger automatically or on hover.
   • Respect user preferences (prefers-reduced-motion).
   • Motion should always support, not replace, visual state changes.
4. ARIA and markup
   • Always expose the button role and name to assistive technology (role="button", aria-label="...").
   • Use aria-pressed for toggle buttons and aria-busy for asynchronous actions.
   • Use aria-live="polite" for status updates triggered by Icon Buttons (e.g. loading states).
5. Testing and validation
   • Validate accessibility using tools like Axe, Lighthouse, or Accessibility Insights.
   • Verify focus visibility under both light and dark modes.
   • Test manually using keyboard navigation to ensure expected behaviour and focus order.