---
title: "IconButton"
description: "Icon buttons allow users to take actions and make choices with a single tap."
sidebar_label: "IconButton"
slug: /reference/components/iconbutton
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# IconButton

Icon buttons allow users to take actions and make choices with a single tap.

**Package:** `@terreno/ui`  
**Categories:** Component  
**Props interface:** `IconButtonProps`  
**Story source:** [`demo/stories/IconButton.stories.tsx`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/IconButton.stories.tsx)

## Live demo

<ComponentDemo name="IconButton" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `accessibilityLabel` | `string` | Yes | The accessibility label attribute identifies the user interface element. It should be a very brief description of the element, such as "Add", "Play", "Deleted", etc. |
| `iconName` | `IconName` | Yes | The name of the icon to display in the button. |
| `onClick` | `reflection` | Yes | The function to call when the button is clicked. |
| `accessibilityHint` | `string` |  | The accessibility hint describes the results of performing an action on a control or view. It should be a very brief description of the result of interacting with the button. |
| `confirmationHeading` | `string` |  | The heading of the confirmation modal. |
| `confirmationText` | `string` |  | The text content of the confirmation modal. |
| `disabled` | `boolean` |  | If true, the button will be disabled. |
| `indicator` | `union` |  | Show a small indicator icon in the lower right corner of the button. |
| `indicatorText` | `union` |  | The text or number to display in the indicator. If not provided, the indicator will be a solid circle. |
| `loading` | `boolean` |  | If true, a loading spinner will be shown in the button. |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |
| `tooltipIdealPosition` | `TooltipPosition` |  | The ideal position of the tooltip. |
| `tooltipIncludeArrow` | `boolean` |  | Include an arrow in the tooltip. Pointing to the button. |
| `tooltipText` | `string` |  | The text content of the tooltip. |
| `variant` | `union` |  | The variant of the button, which determines its style. |
| `withConfirmation` | `boolean` |  | If true, a confirmation modal will be shown before the onClick action. |