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

Live demo

Live preview from the Terreno component demoOpen in playground ↗

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.
size	union		The size of the button.
state	union		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.
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.