Icon Button

An Icon Button is a button that uses an icon instead of text to represent an action, like a thumbs-up for "like" or a trash can for "delete." It’s commonly used in places where space is limited, such as toolbars or mobile interfaces.

Icon buttons are ideal for quick, easily recognised actions, but they rely on familiar icons to avoid confusion. They work best when users can immediately understand the action without additional labels.

Variants

Default

<button
  data-element="icon-button-container"
  data-module="gieds-icon-button"
  data-testid="govieIconButton-default-primary-medium-notDisabled"
  class="gi-btn gi-btn-primary gi-icon-btn-regular">
  <span
    data-testid="govie-icon"    
    role="presentation"
    class="
      material-icons
      gi-block
      gi-text-[16px]">
    thumb_up
  </span>
</button>

{{ govieIconButton({
  "icon": {
    "icon": "thumb_up"
  }
}) }}

import { IconButton } from "@govie-ds/react";

<IconButton
  icon={{
    icon: 'thumb_up'
  }}
  onClick={() => {}}
/>

Usage

Best Practices

When to use this component

• Quick Actions: Use the Icon Button component for actions that are represented clearly by an icon alone, such as a thumbs-up for liking, a heart for favoriting, or a star for bookmarking.
• Limited Space: Ideal for UI areas with limited space where a standard button with text would take up too much room, such as toolbars, navigation bars, or compact action panels.
• Repetitive Actions: Use when an action is repeated across many items in a list (e.g., like buttons for each post in a feed), where text on every button would be visually overwhelming.
• Visual Emphasis on Iconography: Best for interfaces where icons are central to the design, helping users quickly recognise actions through familiar visuals rather than text.

When not to use this component

• Ambiguous Actions: Avoid using an Icon Button when the icon alone doesn’t clearly convey the intended action. In such cases, a text label or a standard button may be more effective.
• Primary or Complex Actions: For primary actions or complex tasks requiring explanation, consider a standard button with text or an icon and text combination to avoid confusion.
• Accessibility Concerns: When accessibility is critical, ensure the icon is universally recognisable, or consider using a button with both icon and text. Avoid using Icon Button components in isolation if screen readers or visually impaired users may have difficulty interpreting the icon's function.

Status