Skip to content

feat(button): add the subtle hue #31649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thetaPC wants to merge 31 commits into from
Open

feat(button): add the subtle hue #31649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
df49658
feat(button): add the subtle hue
thetaPC Oct 24, 2026
2ab5a91
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 26, 2026
5a68deb
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 26, 2026
4c8c1c1
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 26, 2026
9fea1f2
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 26, 2026
7244739
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 26, 2026
16be625
test(button): check subtle hue contrast with axe
thetaPC Oct 26, 2026
abac442
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 26, 2026
96bdecb
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 27, 2026
263164b
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 27, 2026
9d6413d
test(button): rename the subtle a11y color list
thetaPC Oct 27, 2026
11bd774
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 27, 2026
505743b
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 27, 2026
05eed51
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 27, 2026
e6edaea
test(button): loop over the fills array in the subtle hue a11y test
thetaPC Oct 27, 2026
d889424
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
6e010c3
fix(button): use foreground for outline text in md and ios
thetaPC Oct 28, 2026
df9450a
test(button): note the tests that don't vary by direction
thetaPC Oct 28, 2026
2136c87
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
9e73e30
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
c8675b1
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
80796d1
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
20c61d5
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
5d7b07f
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
85113e1
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
f61cd69
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 28, 2026
8c1b217
test(button): render the hue test with setContent, one snapshot per hue
thetaPC Oct 28, 2026
be0dfa9
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 29, 2026
02c2593
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 29, 2026
dd12cad
test(button): size the hue viewport to the content
thetaPC Oct 29, 2026
8c3150f
Merge remote-tracking branch 'origin/FW-6838-icon-only' into FW-6838-hue
thetaPC Oct 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions BREAKING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,12 @@ The following breaking changes apply to `ion-button`:
7. The `ios` button follows iOS 17 for its font, icons and disabled state. <sup>[7](#version-10x-button-ios-17)</sup>
8. A badge without a `vertical` position now has a gap between it and the label, and no longer makes the button taller than its `min.height`. To remove the gap, set `IonButton.size.<size>.badge.margin.start` for global styles or `--ion-button-size-<size>-badge-margin-start` for component-specific styles to `0`.
9. A button with an icon in the `icon-only` slot now shows only that icon and any badge with a `vertical` position. Text, elements in the `start` and `end` slots, and other content are hidden. Hidden text still names the button for assistive technology. To show other content, remove the `icon-only` slot and use the `start` or `end` slot for the icon.
10. CSS variables have been replaced. <sup>[10](#version-10x-button-replaced-css-variables)</sup>
11. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). <sup>[11](#version-10x-button-padding-variables)</sup>
12. The fill, size, shape and expand classes have been renamed. <sup>[12](#version-10x-button-renamed-classes)</sup>
13. The `default` size has been deprecated. <sup>[13](#version-10x-button-deprecated-default-size)</sup>
14. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. <sup>[14](#version-10x-button-theme-classes)</sup>
10. The text of `outline` buttons in `md` and `ios` now uses the color's darker `foreground` variant instead of `base`, matching `clear` buttons, since it sits on the page rather than on a fill of the color. In `ios`, `clear` buttons with a `color` also keep `foreground` on hover and focus. To revert, set `IonButton.hue.bold.outline.<state>.color` (`.semantic.<state>.color` with a `color`) for global styles or `--ion-button-hue-bold-outline-<state>-color` (`--ion-button-hue-bold-outline-semantic-<state>-color`) for component-specific styles to the color's `base`.

@ShaneK ShaneK Nov 2, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The revert only covers outline, but the ios clear semantic hover and focus colors changed too. Could we add IonButton.hue.bold.clear.semantic.<state>.color and --ion-button-hue-bold-clear-semantic-<state>-color here as well?

11. CSS variables have been replaced. <sup>[11](#version-10x-button-replaced-css-variables)</sup>
12. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). <sup>[12](#version-10x-button-padding-variables)</sup>
13. The fill, size, shape and expand classes have been renamed. <sup>[13](#version-10x-button-renamed-classes)</sup>
14. The `default` size has been deprecated. <sup>[14](#version-10x-button-deprecated-default-size)</sup>
15. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. <sup>[15](#version-10x-button-theme-classes)</sup>

<h5 id="version-10x-button-md-material-design-2">Material Design 2 in <code>md</code></h5>

Expand Down
121 changes: 121 additions & 0 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,6 +439,7 @@ ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true
ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undefined,false,true
ion-button,prop,form,HTMLFormElement | string | undefined,undefined,false,false
ion-button,prop,href,string | undefined,undefined,false,false
ion-button,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
ion-button,prop,mode,"ios" | "md",undefined,false,false
ion-button,prop,rel,string | undefined,undefined,false,false
ion-button,prop,routerAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
Expand Down Expand Up @@ -571,6 +572,126 @@ ion-button,css-prop,--ion-button-hue-bold-solid-semantic-hover-color
ion-button,css-prop,--ion-button-hue-bold-solid-semantic-ripple-effect-color
ion-button,css-prop,--ion-button-hue-bold-solid-semantic-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-bold-solid-strong-font-weight
ion-button,css-prop,--ion-button-hue-subtle-clear-activated-background
ion-button,css-prop,--ion-button-hue-subtle-clear-activated-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-clear-activated-color
ion-button,css-prop,--ion-button-hue-subtle-clear-activated-opacity
ion-button,css-prop,--ion-button-hue-subtle-clear-default-background
ion-button,css-prop,--ion-button-hue-subtle-clear-default-border-color
ion-button,css-prop,--ion-button-hue-subtle-clear-default-border-style
ion-button,css-prop,--ion-button-hue-subtle-clear-default-border-width
ion-button,css-prop,--ion-button-hue-subtle-clear-default-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-clear-default-color
ion-button,css-prop,--ion-button-hue-subtle-clear-default-font-weight
ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-background
ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-border-color
ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-color
ion-button,css-prop,--ion-button-hue-subtle-clear-disabled-opacity
ion-button,css-prop,--ion-button-hue-subtle-clear-focus-background
ion-button,css-prop,--ion-button-hue-subtle-clear-focus-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-clear-focus-color
ion-button,css-prop,--ion-button-hue-subtle-clear-hover-background
ion-button,css-prop,--ion-button-hue-subtle-clear-hover-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-clear-hover-color
ion-button,css-prop,--ion-button-hue-subtle-clear-hover-opacity
ion-button,css-prop,--ion-button-hue-subtle-clear-ripple-effect-color
ion-button,css-prop,--ion-button-hue-subtle-clear-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-activated-background
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-activated-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-default-background
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-default-border-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-default-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-disabled-background
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-disabled-border-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-disabled-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-focus-background
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-focus-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-hover-background
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-hover-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-ripple-effect-color
ion-button,css-prop,--ion-button-hue-subtle-clear-semantic-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-subtle-clear-strong-font-weight
ion-button,css-prop,--ion-button-hue-subtle-outline-activated-background
ion-button,css-prop,--ion-button-hue-subtle-outline-activated-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-outline-activated-color
ion-button,css-prop,--ion-button-hue-subtle-outline-activated-opacity
ion-button,css-prop,--ion-button-hue-subtle-outline-default-background
ion-button,css-prop,--ion-button-hue-subtle-outline-default-border-color
ion-button,css-prop,--ion-button-hue-subtle-outline-default-border-style
ion-button,css-prop,--ion-button-hue-subtle-outline-default-border-width
ion-button,css-prop,--ion-button-hue-subtle-outline-default-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-outline-default-color
ion-button,css-prop,--ion-button-hue-subtle-outline-default-font-weight
ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-background
ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-border-color
ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-color
ion-button,css-prop,--ion-button-hue-subtle-outline-disabled-opacity
ion-button,css-prop,--ion-button-hue-subtle-outline-focus-background
ion-button,css-prop,--ion-button-hue-subtle-outline-focus-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-outline-focus-color
ion-button,css-prop,--ion-button-hue-subtle-outline-hover-background
ion-button,css-prop,--ion-button-hue-subtle-outline-hover-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-outline-hover-color
ion-button,css-prop,--ion-button-hue-subtle-outline-hover-opacity
ion-button,css-prop,--ion-button-hue-subtle-outline-ripple-effect-color
ion-button,css-prop,--ion-button-hue-subtle-outline-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-activated-background
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-activated-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-default-background
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-default-border-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-default-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-disabled-background
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-disabled-border-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-disabled-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-focus-background
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-focus-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-hover-background
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-hover-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-ripple-effect-color
ion-button,css-prop,--ion-button-hue-subtle-outline-semantic-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-subtle-outline-strong-font-weight
ion-button,css-prop,--ion-button-hue-subtle-solid-activated-background
ion-button,css-prop,--ion-button-hue-subtle-solid-activated-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-solid-activated-color
ion-button,css-prop,--ion-button-hue-subtle-solid-activated-opacity
ion-button,css-prop,--ion-button-hue-subtle-solid-default-background
ion-button,css-prop,--ion-button-hue-subtle-solid-default-border-color
ion-button,css-prop,--ion-button-hue-subtle-solid-default-border-style
ion-button,css-prop,--ion-button-hue-subtle-solid-default-border-width
ion-button,css-prop,--ion-button-hue-subtle-solid-default-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-solid-default-color
ion-button,css-prop,--ion-button-hue-subtle-solid-default-font-weight
ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-background
ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-border-color
ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-color
ion-button,css-prop,--ion-button-hue-subtle-solid-disabled-opacity
ion-button,css-prop,--ion-button-hue-subtle-solid-focus-background
ion-button,css-prop,--ion-button-hue-subtle-solid-focus-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-solid-focus-color
ion-button,css-prop,--ion-button-hue-subtle-solid-hover-background
ion-button,css-prop,--ion-button-hue-subtle-solid-hover-box-shadow
ion-button,css-prop,--ion-button-hue-subtle-solid-hover-color
ion-button,css-prop,--ion-button-hue-subtle-solid-hover-opacity
ion-button,css-prop,--ion-button-hue-subtle-solid-ripple-effect-color
ion-button,css-prop,--ion-button-hue-subtle-solid-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-activated-background
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-activated-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-default-background
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-default-border-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-default-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-disabled-background
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-disabled-border-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-disabled-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-focus-background
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-focus-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-hover-background
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-hover-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-ripple-effect-color
ion-button,css-prop,--ion-button-hue-subtle-solid-semantic-ripple-effect-opacity
ion-button,css-prop,--ion-button-hue-subtle-solid-strong-font-weight
ion-button,css-prop,--ion-button-letter-spacing
ion-button,css-prop,--ion-button-margin-bottom
ion-button,css-prop,--ion-button-margin-end
Expand Down
9 changes: 9 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,6 +629,10 @@ export namespace Components {
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
"href": string | undefined;
/**
* Set to `"bold"` for a button with vibrant, bold colors or to `"subtle"` for a button with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset.
*/
"hue"?: Hue;
/**
* The mode determines the platform behaviors of the component.
*/
Expand Down Expand Up @@ -6488,6 +6492,10 @@ declare namespace LocalJSX {
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
"href"?: string | undefined;
/**
* Set to `"bold"` for a button with vibrant, bold colors or to `"subtle"` for a button with muted, subtle colors. Defaults to `"bold"` if both the hue property and theme config are unset.
*/
"hue"?: Hue;
/**
* The mode determines the platform behaviors of the component.
*/
Expand Down Expand Up @@ -10493,6 +10501,7 @@ declare namespace LocalJSX {
"disabled": boolean;
"expand": IonButtonExpand;
"fill": IonButtonFill | 'default';
"hue": Hue;
"routerDirection": RouterDirection;
"download": string | undefined;
"href": string | undefined;
Expand Down
Loading
Loading