Icon button

The Material Symbols name of the glyph, such as close.

The button's accessible name, naming its action.

Whether a toggle button is pressed, or undefined when the button is no toggle, which is the default.

Whether the button is a filled circle, for the main action of a field such as a composer's Send: the theme's button color, kept under the pointer, its glyph in the button text color, the button-height across, and its focus outline outside the circle. A disabled or aria-disabled filled button keeps its circle in the widget border color, its glyph in the muted text color. Under forced colors it is a ButtonText ring around a ButtonText glyph, or GrayText while disabled or aria-disabled. False by default.

Whether the button is a round overlay, for an action over an image such as an attachment's Remove: a circle the icon button's size across in the theme's overlay look, 70% black, its glyph in its overlay-text look, white, the same in light and dark, so the glyph keeps 4.5:1 over any image. Under the pointer the toolbar hover lies over the fill; its focus outline is outside the circle, and disabled or aria-disabled it is at half opacity. Under forced colors it is a ButtonText ring around a ButtonText glyph, or GrayText while disabled or aria-disabled. Where it shows, such as only while its image is hovered or holds focus, is its owner's. filled wins when both are set. False by default.

Whether an overlay icon button sits on the overlay backdrop itself, such as an image viewer's Close, where the overlay fill would vanish: its circle takes the theme's overlay-control look, white at 10%, with its overlay-control-hover look, white at 8%, over it under the pointer and while pressed, and its glyph the overlay-control-text look, #EEEEEE; disabled, it is at 35% opacity. Forced colors keep the overlay look. Ignored without overlay, and filled wins; false when not bound.

Whether the icon button takes the button's height, 1.625rem, in place of its own, for a row it shares with buttons, such as an image viewer's zoom out, percentage and zoom in, so they share one height and center line. Its glyph keeps the icon size. Ignored while filled, which is already that size; false when not bound.

Whether the button's action destroys something, such as Delete or Remove: its glyph takes the theme's error color, with the same hover, focus and disabled looks as the plain button; under forced colors it is the plain button's ButtonText. Ignored while filled or overlay; false when not bound.

Whether the button has a tab action's size, for an action at the end of a row that should sit and highlight as a tab's close button does, such as an Explorer row's actions: its hit region is the tab action's slot, tab-action-slot, at least 24px, and its hover fill is the tab close's, tab-close, with the small radius. Its glyph and looks are otherwise the plain button's. filled and overlay win when either is set; it wins over buttonHeight on a plain button, which keeps the tab action's size. False by default.

Whether the button's work is under way: the kit's spinner, in the glyph's color, stands centered in place of the glyph, so the button keeps its size exactly; under forced colors the spinner keeps its own look, a Highlight arc on a Canvas track. It is marked aria-busy, and ignores clicks, middle clicks, Enter and Space, so neither its own handlers nor its parents hear them, unless IconButtonComponent.busyPressable is on. False when not bound.

Whether a busy button still takes clicks, middle clicks, Enter and Space, as when a press while the work runs is the app's to answer, such as a shell block's Run while its commands run; it keeps the busy look and aria-busy. False when not bound, so a busy button ignores presses.