Icon buttons allow users to take actions and make choices with a single tap.
Variant
State
Icon Name
With Confirmation
Size
Usage Guidelines
Do
Use to trigger an action or progression within a task or flow.
Use concise, descriptive icons that are easily recognizable.
Provide accessible labels that describe the button's action.
Don't
Do not use without an accessible label.
Avoid using icons that are not easily recognizable or understood by users.
Accessibility
Ensure that each IconButton has an appropriate accessibilityLabel that describes the action it performs.
If the button has a confirmation dialog, indicate this with an appropriate accessibilityHint.
When using icons, provide clear and consistent iconography that users can easily understand.
Props
Name
Type
Required
Description
accessibilityLabel
string
Required
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
Required
The name of the icon to display in the button.
onClick
Required
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
Show a small indicator icon in the lower right corner of the button.
indicatorText
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.
size
The size of the button.
state
Controls the button's interaction state. Use Default for standard button appearance
and Active to indicate a selected or currently engaged state.
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.