Loading navigation…
User
API and Development
IconButton is used to perform actions through icon-only buttons, providing a compact interface for common interactions without text labels. It provides a consistent way to render icon-based actions throughout the interface. Built as a wrapper around the standard Button component, it combines an icon with an integrated tooltip, ensuring accessibility while maintaining a minimal visual footprint.
| Name | Default | Description |
|---|---|---|
icon | required | The SVG asset for the icon to display in the button. |
title | required | The title text for the button, displayed in the tooltip and used for accessibility. |
type | ButtonType.Secondary | Enum for button appearance variants. Other variations of ButtonType include Critical | Primary | Secondary | SecondaryAlt | Link | Success | Destructive. |
size | IconButtonSize.Regular | Small, Regular, or Large. Aliased to ButtonSize in code. |
pill | false | Opt in to a fully rounded (pill / circular) border radius. Intended for floating toolbars and FAB-style controls. Combine with cornerStyle={ComponentCornerStyle.Sharp} to override back to square corners. |
disabled | false | Whether the button is disabled. |
onClick | Function to call on click. | |
onMouseEnter | Function to call on mouse enter. | |
onMouseLeave | Function to call on mouse leave. | |
onMouseDown | Function to call on mouse down. | |
onMouseUp | Function to call on mouse up. | |
className | Additional CSS classes to apply. | |
toggle | false | Non-link only. Opt in to sustained aria-pressed via standalone Radix Toggle (asChild). Inherited from Button. |
pressed / defaultPressed / onPressedChange | Non-link only. Controlled or uncontrolled pressed state when toggle is true. Link IconButton strips these props before spreading onto the DOM. |
Use for important icon actions that change significant product state, allowing one critical button per page.
Use for the most important icon action on a page or within a specific section.
Use for standard icon actions throughout the interface.
Pass the pill prop to opt in to a fully rounded (pill / circular) border radius. Intended for floating toolbars and FAB-style controls such as the staff panel toggle. pill works with any ButtonType; combine with cornerStyle={ComponentCornerStyle.Sharp} to override back to square corners when a brand or layout requires it.
Use for icon actions of lesser importance when differentiating from primary actions.
Use for icon buttons that function as navigation links or subtle actions.
Semantic icon buttons give users visual cues about their purpose through color.
Use to indicate constructive icon actions or confirmations of positive states.
Use to indicate destructive icon actions such as deleting or removing content.
IconButton shares the same three sizes as Button for consistent density.
Use for unavailable actions, ensuring the tooltip explains why the action is unavailable.
Use appropriate icons for standard actions to maintain consistency.
Use to group related icon actions together for logical organization.
Use in table rows to provide contextual actions for each item.
Use to show different icons or states based on application logic.