[v12] feat(ui-buttons): add v2 button components with new icon system and theming by balzss · Pull Request #2427 · instructure/instructure-ui

balzss · 2026-03-04T20:03:48Z

INSTUI-4787

Summary

Migrates Button, CondensedButton, and IconButton to the new v12 centralized theme system.

Removed individual theme.ts files from Button, CondensedButton, and IconButton (they re-exported BaseButton's theme) — theming is now handled centrally via withStyle(null, 'BaseButton')
Switched from withStyleRework to withStyle and from legacy generateComponentTheme to the new token-based approach (NewComponentTypes/SharedTokens)
Added explicit disabled state styling per color variant (previously just opacity: 0.5)
Added active state styles for AI button variants
Removed active box shadow styles as they were not working and not making any visual difference
Added two condensed size variants: condensedSmall and condensedMedium
Icon sizing inside buttons now uses renderIconWithProps with proper size mapping per button size
AI secondary button border now uses a ::before pseudo-element mask technique instead of relying on background gradient as border
Content area switched from display: block to display: flex with alignItems: center for proper vertical alignment
Replaced darken/lighten color utils with dedicated theme tokens for hover/active states

Test plan

Verify all button variants (primary, secondary, success, danger, primary-inverse) render correctly in both filled and ghost modes
Verify AI primary and AI secondary button variants including hover, active, and disabled states
Verify condensed size variants (condensedSmall, condensedMedium) render at the correct compact heights
Verify disabled state styling across all color variants (should use variant-specific colors instead of blanket opacity)
Verify icon sizing matches button size (sm/md/lg/xs icons for small/medium/large/condensed buttons)
Verify Button, CondensedButton, and IconButton all render correctly (they delegate to BaseButton)
Check RTL layout still works correctly

github-actions · 2026-03-04T20:08:32Z

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2427/
Built to branch `gh-pages` at 2026-03-11 16:52 UTC. Preview will be ready when the GitHub Pages deployment is complete.

adamlobler

I left some minor comments, if something is not clear we can talk about them in a meeting

adamlobler · 2026-03-09T12:55:44Z

packages/ui-buttons/src/Button/v2/README.md

+<View display="block">
+  <Button size="condensedSmall" margin="small">Condensed Small</Button>
+  <Button size="condensedMedium" margin="small">Condensed Medium</Button>
+  <Button size="small" margin="small">Small</Button>


I think this line shouldn't be here

i added the small size here for comparison, not strictly necessary

adamlobler · 2026-03-09T13:12:11Z

packages/ui-buttons/src/BaseButton/v2/styles.ts

+      paddingTop: componentTheme.paddingVertical,
+      paddingBottom: componentTheme.paddingVertical,


We don't need these, the height tokens are enough. We can delete it because this way the small size variant is taller (36pxs) than the smallHeight token that is 32px, and this way it doesn't follow the design.

this was removed and added back by @hajnaldo because we realized that without padding the wrapped multiline buttons would break. however the small variant being 36 instead of 32 is a bug and i'll check it

ah I see, okay 👌

yes, it looks like this padding is too large for the small varirant. i guess it should be either reduced or an other one introduced for small icons

adamlobler · 2026-03-09T13:23:44Z

packages/ui-buttons/src/Button/v2/README.md

+  <Button color="ai-primary" renderIcon={SparklesInstUIIcon} margin="small">AI Primary</Button>
+  <Button color="ai-secondary" renderIcon={SparklesInstUIIcon} margin="small">AI Secondary</Button>
+  <IconButton color="ai-primary" screenReaderLabel="AI button" margin="small"><SparklesInstUIIcon/></IconButton>
+  <IconButton  shape='circle' color="ai-secondary" screenReaderLabel="AI button"  margin="small"><SparklesInstUIIcon/></IconButton>
+  <IconButton   shape='circle' color="ai-primary" screenReaderLabel="AI button" margin="small"><SparklesInstUIIcon/></IconButton>
+  <IconButton color="ai-secondary" screenReaderLabel="AI button"  margin="small"><SparklesInstUIIcon/></IconButton>


In design we have a custom icon for the ai features, we should use this instead. I'm not sure if its available in code now or not.

@joyenjoyer

that one is work in progress, i can replace once that's merged into v12

It should be available now

Peti said that its available on this branch: https://github.com/instructure/instructure-ui/tree/INSTUI-4892-tidy-up-the-icons-gallery

yes, and as far as i know it will be merged in the coming days, so i can rebase and use it

adamlobler · 2026-03-09T13:32:56Z

packages/ui-buttons/src/Button/v2/README.md

+Use backgroundless buttons for interfaces on dark backgrounds or when there is a need to deemphasize the button from another primary action on the page. Be sure to use border/text colors that meet the proper contrast ratios with whatever background they are placed on.
+
+```js
+---
+type: example
+---
+<View display="block">
+  <View display="inline-block" background="primary">
+    <Button renderIcon={PlusInstUIIcon} withBackground={false} color="primary" margin="small">Click here</Button>
+  </View>
+</View>
+```
+


I wouldn't advertise this capability, everyone should use the color prop instead to "deemphasize" the button. I tried to make a proper View background + Button (without bg) combo but I can't create even one that doesn't have a11y issues on light or dark mode, so I would delete this section.

I realised that this is the only option now to have a tertiary button, so I would show this:

<View display="block"> <Button renderIcon={PlusInstUIIcon} withBackground={false} color="secondary" margin="small">Click here</Button> </View>

With this description removing some words:
Use backgroundless buttons when there is a need to deemphasize the button. Be sure to use border/text colors that meet the proper contrast ratios with whatever background they are placed on.

ok, i'll update it

Thanks! 🙏

adamlobler · 2026-03-09T13:53:49Z

packages/ui-buttons/src/BaseButton/v2/styles.ts

+                    position: 'absolute',
+                    inset: '0',
+                    borderRadius: 'inherit',
+                    padding: componentTheme.borderWidth,


Because of the padding these outline variants are always bigger than the others with the size of the borderWidth. Maybe we should override the general minHeight here with minHeight=heightToken-borderWidth

i will look into this

i guess this is the same issue as the small variant with the padding

matyasf

You should delete the tests from the v1 versions
there are a couple of places in the v1 version, that still import from just ui-view or from ui-view/latest. AFAIK both are wrong, v1 versions should specify the exact import if there are multiple versions, like ui-view/v11_6

packages/ui-buttons/package.json

packages/ui-buttons/src/BaseButton/v2/props.ts

packages/__docs__/src/App/index.tsx

packages/ui-buttons/src/Button/v2/props.ts

packages/ui-buttons/src/CloseButton/v2/props.ts

packages/ui-buttons/src/CondensedButton/v2/props.ts

packages/ui-buttons/src/IconButton/v2/props.ts

packages/ui-buttons/src/ToggleButton/v2/props.ts

balzss · 2026-03-11T16:31:39Z

You should delete the tests from the v1 versions

there are a couple of places in the v1 version, that still import from just ui-view or from ui-view/latest. AFAIK both are wrong, v1 versions should specify the exact import if there are multiple versions, like ui-view/v11_6

@matyasf

tests have been removed from v1
imports have been updated in @HerrTopi 's commit
the temp docs change is needed for designers to be able to review the changes, those will be reverted before merge

…heming Create v2 versions of all 6 button components (BaseButton, Button, CloseButton, CondensedButton, IconButton, ToggleButton) using the new Lucide icon system and NewComponentTypes theme system. Add exports/b.ts for v2 exports and update ./v11_7 and ./latest package entry points to resolve to v2.

Remove v1 test files (only latest version needs tests) and simplify backgroundless button documentation section in v2 Button README.

balzss self-assigned this Mar 4, 2026

balzss changed the title ~~feat(ui-buttons): add v2 button components with new icon system and theming~~ [v12] feat(ui-buttons): add v2 button components with new icon system and theming Mar 4, 2026

balzss force-pushed the button-rework-v12-versioned branch 2 times, most recently from 1e871a2 to d3f8bfd Compare March 8, 2026 21:09

balzss requested review from ToMESSKa and matyasf March 9, 2026 10:24

balzss force-pushed the button-rework-v12-versioned branch from 62791a3 to 199a92f Compare March 9, 2026 10:28

adamlobler requested changes Mar 9, 2026

View reviewed changes

matyasf requested changes Mar 10, 2026

View reviewed changes

HerrTopi self-requested a review March 11, 2026 10:53

balzss requested a review from matyasf March 11, 2026 16:29

balzss and others added 4 commits March 11, 2026 17:46

chore: temp version bump for preview

1db9dd5

fix(ui-buttons): fix imports to conform with multi versions

10296b7

fix(ui-buttons): address PR review feedback

a5b305d

Remove v1 test files (only latest version needs tests) and simplify backgroundless button documentation section in v2 Button README.

balzss force-pushed the button-rework-v12-versioned branch from 64899b5 to a5b305d Compare March 11, 2026 16:47

		paddingTop: componentTheme.paddingVertical,
		paddingBottom: componentTheme.paddingVertical,

Conversation

balzss commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

INSTUI-4787

Summary

Test plan

Uh oh!

github-actions bot commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-03-11 16:52 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

adamlobler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamlobler Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

balzss commented Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

balzss commented Mar 4, 2026 •

edited

Loading

github-actions bot commented Mar 4, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-03-11 16:52 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

adamlobler Mar 9, 2026 •

edited

Loading