StyledIconButton

A 40 px circular icon button with two named constructors: .accent for a bar’s primary action and .surface for secondary actions. Introduced with the single-pill conversation input bar, where it is the send/voice button, the mic, and the attachment picker. Source: styled_icon_button.dart.

// Primary action — accent palette
StyledIconButton.accent(
  icon: const Icon(Symbols.arrow_upward),
  tooltip: 'Send message',
  onPressed: onSubmit,
)

// Secondary action — surface palette
StyledIconButton.surface(
  icon: const Icon(Symbols.add),
  tooltip: 'Add attachment',
  onPressed: openPicker,
)

API

Parameter	Type	Notes
`onPressed`	`VoidCallback?`	required — `null` disables the button
`icon`	`Widget`	required — the icon inside the circle
`tooltip`	`String?`	accessibility / long-press label
`iconSize`	`double`	icon size within the circle, default 24
`showDisabledColors`	`bool`	forces the disabled palette while keeping `onPressed` active, default `false`

Variants

.accent — fill accent.button, icon accent.onButton. One per bar: the primary action.
.surface — fill surfaceHigh, icon contrastMedium. Any number of secondary actions.
Disabled — disabledContainer / disabledOnContainer, from either a null onPressed or showDisabledColors: true.

showDisabledColors exists for buttons that should look unavailable but stay tappable to explain why — the input bar’s voice button uses it to show a “voice unavailable” toast instead of going dead.

Anatomy

Fixed 40 px circle (fixedSize/minimumSize), zero padding, shrinkWrap tap target — sized to sit inside a pill-shaped bar
Built on Material’s IconButton with IconButton.styleFrom, so ripple, focus, and tooltip behavior are stock

Accessibility

Pass tooltip — it doubles as the screen-reader label for the icon-only button and appears on long-press. Prefer keeping the button tappable with showDisabledColors over hard-disabling when the action’s unavailability deserves an explanation.

Tokens consumed

accent.button, accent.onButton, surfaceHigh, contrastMedium, disabledContainer, disabledOnContainer. Changing persona (or wrapping in ThemeOverride) recolors the accent variant automatically — see Persona theming.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

StyledIconButton

API

Variants

Anatomy

Accessibility

Tokens consumed