Icon Toggle

icon

SVGAsset

—

SVG icon displayed in the unchecked state.

iconChecked

SVGAsset

—

SVG icon displayed in the checked state.

active

boolean

—

When true, applies an active/pressed visual state.

align

TooltipAlign

—

—

as

InteractableTag

InteractableTag.Button

HTML element tag to render.

checked

boolean

—

Controlled checked state of the toggle.

className

string

—

Additional CSS class name(s) applied to the element.

cornerStyle

ComponentCornerStyle

—

Corner radius treatment for the tooltip surface; defaults from brand package when omitted.

delayDuration

number

200

Delay in milliseconds before the tooltip appears

disabled

boolean

—

When true, disables interaction and applies a disabled visual state.

fontSize

IconFontSize

—

Custom font size for the icons.

hideTooltip

boolean

false

When true, the tooltip is unmounted entirely rather than closed via open={false}. This bypasses Radix's fade-out and any anchor-follow repositioning, ensuring the tooltip vanishes instantly. Useful when a parent container is about to run an exit animation (e.g. the staff panel FAB toolbar collapsing back into the FAB) and any tooltip left open would appear to "whisk" along with the shrinking trigger.

href

string

—

URL for anchor-based interactables. Changes the rendered element to an <a> tag.

iconColor

IconColor

—

—

injectChild

boolean

—

Choose to inject interactivity into a child element such as a Div element

interactionType

InteractableType

InteractableType.Default

Visual style variant for the interactive element.

onOpenChange

((open: boolean) => void)

—

—

open

boolean

—

—

pill

boolean

false

When true, renders with a fully rounded (pill / circular) border radius. Opt-in only; the default is the standard icon-toggle corner radius. Intended for floating toolbars and FAB-style controls, such as the staff panel FAB toolbar.

portalSelector

string

—

The selector of the element to render the portal for the tooltip. If not provided, the tooltip will render in the default location (body). Use this to render the tooltip inside a specific container (e.g., ".radix-themes" for theme inheritance).

preventCloseOnClick

boolean

false

Prevents the tooltip from closing when the trigger is clicked. Useful for read-only elements where clicking should have no effect.

rel

string

—

Relationship for anchor-based interactables (for example noopener noreferrer).

role

string

—

ARIA role attribute for the interactive element.

side

TooltipSide

—

—

tabIndex

number

—

Overrides the default tab order for non-disabled elements. Pass -1 to remove the element from the tab sequence while keeping it programmatically focusable — useful for listbox/menu items that participate in roving-tabindex / cmdk-style keyboard navigation (the parent handles arrow keys; items should not be reachable via Tab). disabled always wins: disabled elements are forced to -1 regardless of this prop, since putting a disabled control in the tab order is an accessibility bug. Defaults to 0 for enabled elements and -1 for disabled ones.

target

HTMLAttributeAnchorTarget

—

Target for anchor-based interactables (for example _blank).

title

string | (string & ReactElement<unknown, string | JSXElementConstructor<any>>) | (string & Iterable<ReactNode>) | (string & ReactPortal) | (string & Promise<...>)

—

Accessible label for the control and its tooltip text. Applied as aria-label, so it names the toggle exactly once regardless of which icon is currently revealed. Native HTML title attribute for browser tooltip fallback

tooltip

string

—

Optional tooltip text to display on hover (uses Radix Tooltip)

tooltipSide

TooltipPosition

—

Position of the tooltip relative to the element, defaults to "top"

type

IconToggleType

IconToggleType.Default

Color variant applied when the toggle is checked.

wrapTrigger

boolean

false

Wraps children in a span to reliably capture mouse enter/leave events. Primarily needed with preventCloseOnClick when the child may not compose event handler props passed via cloneElement. NOT needed for tooltips on disabled buttons — Radix Tooltip uses pointer events (onPointerMove), which fire on disabled elements.