> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# StyledIconButton

> 40 px circular icon button in accent or surface palettes, sized for input-bar pills

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`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_icon_button.dart).

```dart theme={null}
// 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](https://design.slingshotai.com/components/theme-override.md)) recolors the accent variant automatically — see [Persona theming](https://design.slingshotai.com/theming/persona-theming.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.