Overview
Voice and Tone
Adjust communication style with controllable axes like formal-casual and technical-plain
tonevoicestyle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
axes | VoiceToneAxis[] | required | Array of tone axes with id, label, left/right labels, value, and optional min/max/step |
onChange | (axisId: string, value: number) => void | required | Callback fired when an axis value changes |
title | string | "Voice and Tone" | Optional heading for the voice/tone control panel |
showValues | boolean | true | Whether to display current numeric values for each axis |
variant | "sliders" | "compact" | "sliders" | Display density of the axis controls |
Docs
Voice and Tone gives users direct control over communication register through explicit axes such as formal-casual, plain-technical, and direct-empathetic. Unlike presets, this pattern supports fine-grained adjustment and helps teams converge on the exact tone required for each audience.
Variants
- Full sliders — Labeled bipolar sliders with left/right anchors for clear tonal direction.
- Compact controls — Minimal slider layout for constrained interfaces where space is limited.
- Hybrid preset + slider — Preset starting points with manual axis refinement for precision.
Use Cases
- Adapting AI copy for internal vs customer-facing communication
- Balancing technical accuracy with accessibility for mixed audiences
- Tuning assistant responses in support and success workflows
- Standardizing tone controls across reusable content pipelines
- Fine-tuning outputs beyond preset style bundles
Best Practices
- Use clear axis labels with meaningful opposite anchors.
- Show current numeric values for precision and repeatability.
- Keep axis count focused on the most impactful tone dimensions.
- Pair tonal controls with previewed output whenever possible.
- Offer presets as optional starting points, not replacements for manual tuning.