> ## 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.

# StyledFloatingActionButton

> Pill FAB with accent fill, accent-ramp border, icon, and label

A pill-shaped extended FAB in the active persona's accent palette. Source: [`styled_floating_action_button.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_floating_action_button.dart).

```dart theme={null}
StyledFloatingActionButton(
  icon: AshIcon(AshIcons.conversation),
  label: 'Talk to Ash',
  onPressed: startSession,
)
```

## API

| Parameter | Type | Notes |
| - | - | - |
| `onPressed` | `VoidCallback` | **required** |
| `icon` | `Widget` | **required** — tinted `accent.onButton`, 20 px via `IconTheme` |
| `label` | `String` | **required** — `buttonLarge` in `accent.onButton` |

## Anatomy

* 52 px tall stadium, horizontal padding 24, 4 px icon-label gap
* Fill: `accent.button`
* Border: 3 px inside stroke of **`accent.base[500]`** — the one place a component reaches into the accent's raw ramp
* Ink ripple via `Material` + `InkWell`, anti-aliased clip

## Accessibility

Wrapped in [`SemanticButton`](https://design.slingshotai.com/components/semantic-button) with no explicit label — the visible label merges into a single semantics node, so screen readers announce "‹label›, button".

## Tokens consumed

`accent.button`, `accent.onButton`, `accent.base[500]`; typography `buttonLarge`.

Changing persona (or wrapping in [ThemeOverride](https://design.slingshotai.com/components/theme-override.md)) recolors the FAB 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.