[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

Buttons only have bold colors. Unlike chip and badge, which also have a color prop, there's no hue prop for muted colors.

What is the new behavior?

• Adds a hue prop to ion-button. It reads the prop first, then IonButton.hue in the theme config, and defaults to bold, like chip
• Adds hue.subtle to the recipe in every theme, with the same fills, states, semantic colors, ripple and disabled styles as bold
• Subtle colors come from the shared subtle palette that chip, badge and text already use:
  • solid: the subtle fill with its paired contrast text
  • outline: the same background as bold (transparent, or the page color in ionic), foreground text and a subtle shade border. md keeps its neutral 12% border
  • clear: transparent with foreground text
• Text on the page or a translucent tint uses foreground, and text on an opaque fill of the color uses contrast, matching ion-text and FW-6422
• Adds a hue test page that shows both hues in every fill, color and state

Does this introduce a breaking change?

• Yes
• No

Other information

Why these choices

• The shared subtle palette instead of iOS 17's tinted button: the iOS 17 kit's Bezeled style is the button's color at 15% (#D9E5FC for primary), measured from the kit and from a native UIButton in its tinted configuration. The shared palette (#EBF1FD) matches ios chips and badges, works for every color and follows the palette in dark mode. iOS 17's value would make subtle buttons darker than the subtle chips beside them
• md and ionic have no subtle design: MD2 has no tonal button, and the ionic design only has fill, outline and ghost. Both follow the shared subtle palette
• Outline keeps bold's background: a subtle fill behind an outline would make it look like a subtle solid button

Known gaps

• Subtle light, warning and success text fails WCAG's 4.5:1 on white, the same as in subtle chips. The colors come from the shared palette, so the fix belongs there (FW-6417)
• Toolbars only override bold, so a subtle button in a toolbar uses the theme's subtle tokens. The ion-buttons and toolbar migrations can add their own

How to test

Check	Preview	What to look for
Both hues, ios	Preview	Each fill shows bold, then subtle, in every color. Subtle solid has a pale fill with colored text, and subtle outline and clear have darker colored text
Both hues, md	Preview	Same as ios, with the ripple on press and elevation on subtle solid
Both hues, ionic	Preview	Hovering or pressing subtle outline and clear fills them with the subtle shade

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 24, 2026 3:09am UTC