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

# SemanticButton

> Accessibility wrapper that exposes a custom tappable as a single button to screen readers

Raw `GestureDetector`s and bare `InkWell`s don't announce a button role, and widgets composed of several texts read as disjoint nodes. `SemanticButton` merges its subtree into **one semantics node** with `button: true`, so VoiceOver/TalkBack reads e.g. *“Inspired by you, Your own definition of enough, button”* and activates it with the standard double-tap. Source: [`semantic_button.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/semantic_button.dart).

```dart theme={null}
SemanticButton(
  child: InkWell(
    onTap: openEntry,
    child: Column(children: [titleText, subtitleText]),
  ),
)
```

Implementation is deliberately tiny: `MergeSemantics` ▸ `Semantics(button: true, …)` ▸ optionally `ExcludeSemantics`. No visuals, no tokens — purely semantics.

## API

| Parameter | Type | Default | Notes |
| - | - | - | - |
| `child` | `Widget` | **required** | The tappable subtree |
| `label` | `String?` | `null` | Screen-reader label; null composes from the child's visible text |
| `hint` | `String?` | — | Usage hint, e.g. “Double tap to open” |
| `selected` | `bool?` | `null` | Selection state for toggle-like buttons |
| `enabled` | `bool` | `true` | — |
| `excludeChildSemantics` | `bool` | `false` | Hide the child's own semantics, keep only `label`/`hint` |
| `onTap` | `VoidCallback?` | — | Semantic tap action — only when the child contributes none |

## Usage rules (from the source doc comment)

**1. Visible descriptive text → no label**

The merge composes the announcement from the child's text automatically.

**2. Decorative or animated child → label + excludeChildSemantics**

Custom paint or streaming text reads badly; provide a stable `label` and set `excludeChildSemantics: true`.

**3. Never wrap other interactive controls**

The merge swallows nested controls' tap actions — one button per wrapper.

**4. Pass onTap only when the child has no semantic tap**

An `InkWell`/`GestureDetector` inside already merges its handler; duplicating it double-registers.

## Used by

[`StyledFloatingActionButton`](https://design.slingshotai.com/components/styled-floating-action-button) and composite tappables like [`StyledListTile`](https://design.slingshotai.com/components/styled-list-tile) consumers. Reach for it any time you build a custom tappable that isn't a Material button.


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