Icon Button 2.0 Update #2953
Description
Icon Button Component Style & Token Update Spec
1. Props & Variants Overview
| Prop / Variant | New? | Notes |
|---|---|---|
variant: "color", "light", "dark", "destructive" |
❌ | Existing variants maintained, visual styles updated |
variant: "nocolor" |
❌ | Deprecated variant (aliased to "dark"), behavior unchanged |
size: "small", "medium", "large" |
❌ | Existing sizes maintained, padding values verified |
disabled |
❌ | Behavior unchanged, visual style refined |
theme: "outline", "filled" |
❌ | Icon theme support unchanged |
inverted |
❌ | Deprecated prop (aliased to "light"), behavior unchanged |
| Focus states | ❌ | Visual implementation updated from box-shadow to border |
| Hover states | ❌ | Background colors refined across variants |
2. Style + Token Comparison Table
| Token / Raw Style | CSS Property | Variant / State | Current Value | New Value | Status | Notes |
|---|---|---|---|---|---|---|
--goa-icon-button-default-hover-color-bg |
background-color |
Default hover | {color.greyscale.100} (#f1f1f1) |
#f2f0f0 |
Updated | Slightly warmer gray for hover state |
--goa-icon-button-destructive-hover-color-bg |
background-color |
Destructive hover | {color.emergency.light} (#fbd1ce) |
#fdded9 |
Updated | Refined destructive hover background |
| Focus box-shadow | box-shadow |
All focus states | 0 0 0 3px var(--goa-color-interactive-focus) |
(removed) | Removed | Replace with border-based focus |
| Focus border | border |
All focus states | (none) | 2px solid #006dcc |
New | New border-based focus implementation |
| Focus border color | border-color |
All focus states | (none) | #006dcc |
New | Updated focus color value |
| Focus border-radius | border-radius |
All focus states | (none) | 10px (button radius + 2px) |
New | Border radius adjustment for focus |
--goa-icon-button-default-color |
color |
Default | {color.interactive.default} (#0070c4) |
#0070c4 |
Unchanged | Default icon color maintained |
--goa-icon-button-default-hover-color |
color |
Default hover | {color.interactive.hover} (#004f84) |
#004f84 |
Unchanged | Default hover color maintained |
--goa-icon-button-light-hover-color-bg |
background-color |
Light hover | {color.greyscale.700} (#666666) |
#666666 |
Unchanged | Light hover background maintained |
--goa-icon-button-dark-hover-color-bg |
background-color |
Dark hover | {color.greyscale.100} (#f1f1f1) |
#f2f0f0 |
Updated | Updated to match default hover |
--goa-icon-button-small-padding |
padding |
Small | {space.2xs} (4px) |
4px |
Unchanged | Small padding maintained |
--goa-icon-button-medium-padding |
padding |
Medium | {space.2xs} (4px) |
8px |
Updated | Medium now uses 8px instead of 4px |
--goa-icon-button-large-padding |
padding |
Large | {space.xs} (8px) |
12px |
Updated | Large now uses 12px instead of 8px |
--goa-icon-button-medium-border-radius |
border-radius |
Small/Medium | {borderRadius.m} (4px) |
8px |
Updated | Updated to 8px for consistency |
--goa-icon-button-large-border-radius |
border-radius |
Large | {borderRadius.xl} (8px) |
8px |
Unchanged | Border radius maintained |
| Icon size | width/height |
Small/Medium | 24px | 24px | Unchanged | Small and medium use 24px icons |
| Icon size | width/height |
Large | 24px | 32px | Updated | Large size uses 32px icons |
3. New Tokens to Add
| Token Name | Value | Description |
|---|---|---|
--goa-icon-button-small-padding |
4px |
Padding for small icon buttons (if not using existing token) |
--goa-icon-button-focus-border-width |
2px |
Border width for focus states |
--goa-icon-button-focus-border-color |
#006dcc |
Border color for focus states |
--goa-icon-button-focus-border-radius |
10px |
Border radius for focus outline (8px base + 2px) |
4. Deprecated / No Longer Used Tokens
| Token Name | Last Used In | Notes |
|---|---|---|
| None identified | N/A | All existing tokens updated rather than deprecated |
5. Complete Design Token Inventory
| Token Name | Current Value | Used For | State/Variant | CSS Property | Status |
|---|---|---|---|---|---|
--goa-icon-button-default-color |
{color.interactive.default} (#0070c4) |
Icon color | Default | color/fill | Current |
--goa-icon-button-default-hover-color |
{color.interactive.hover} (#004f84) |
Icon color | Default hover | color/fill | Current |
--goa-icon-button-default-focus-color |
{color.interactive.hover} (#004f84) |
Icon color | Default focus | color/fill | Current |
--goa-icon-button-default-hover-color-bg |
#f2f0f0 |
Background color | Default hover | background-color | Updated |
--goa-icon-button-default-disabled-color |
{color.interactive.disabled} (#80b7e1) |
Icon color | Default disabled | color/fill | Current |
--goa-icon-button-light-color |
{color.greyscale.white} (#ffffff) |
Icon color | Light | color/fill | Current |
--goa-icon-button-light-hover-color-bg |
{color.greyscale.700} (#666666) |
Background color | Light hover | background-color | Current |
--goa-icon-button-light-disabled-color |
{color.greyscale.500} (#949494) |
Icon color | Light disabled | color/fill | Current |
--goa-icon-button-dark-color |
{color.greyscale.black} (#333333) |
Icon color | Dark | color/fill | Current |
--goa-icon-button-dark-hover-color-bg |
#f2f0f0 |
Background color | Dark hover | background-color | Updated |
--goa-icon-button-dark-disabled-color-bg |
{color.greyscale.500} (#949494) |
Icon color | Dark disabled | color/fill | Current |
--goa-icon-button-destructive-color |
{color.emergency.default} (#da291c) |
Icon color | Destructive | color/fill | Current |
--goa-icon-button-destructive-hover-color-bg |
#fdded9 |
Background color | Destructive hover | background-color | Updated |
--goa-icon-button-destructive-disabled-color |
{color.interactive.error-disabled} (#f58185) |
Icon color | Destructive disabled | color/fill | Current |
--goa-icon-button-small-padding |
{space.2xs} (4px) |
Padding | Small | padding | Current |
--goa-icon-button-medium-padding |
8px |
Padding | Medium | padding | Updated |
--goa-icon-button-large-padding |
12px |
Padding | Large | padding | Updated |
--goa-icon-button-medium-border-radius |
8px |
Border radius | Small/Medium | border-radius | Updated |
--goa-icon-button-large-border-radius |
{borderRadius.xl} (8px) |
Border radius | Large | border-radius | Current |
| Icon size small/medium | 24px |
Icon dimensions | Small/Medium | width/height | Current |
| Icon size large | 32px |
Icon dimensions | Large | width/height | Updated |
--goa-icon-button-focus-border-width |
2px |
Focus border width | All focus states | border-width | New |
--goa-icon-button-focus-border-color |
#006dcc |
Focus border color | All focus states | border-color | New |
--goa-icon-button-focus-border-radius |
10px |
Focus border radius | All focus states | border-radius | New |
Purpose: This inventory will be maintained and updated throughout the implementation process to track all token changes and serve as the definitive reference for the component's design token ecosystem.
6. Implementation Notes
- Focus State Change: Critical update from
box-shadowtoborderimplementation- Remove:
box-shadow: 0 0 0 3px var(--goa-color-interactive-focus) - Add:
border: 2px solid #006dccwithborder-radius: 10px
- Remove:
- Padding Updates:
- Small: 4px (unchanged)
- Medium: 8px (was 4px)
- Large: 12px (was 8px)
- Icon Size Updates: Large size icons scale to 32x32px (was 24x24px)
- Border Radius Update: Small and Medium sizes now use 8px border-radius (was 4px)
- Hover Background Updates:
- Default and Dark variants now use
#f2f0f0(refined gray) - Destructive variant now uses
#fdded9(refined emergency background)
- Default and Dark variants now use
- Component Structure: No changes to component props or behavior - only CSS custom property updates
- Accessibility: Focus implementation improves WCAG compliance with clearer visual boundaries
- Deprecated Warnings: Maintain existing console warnings for
nocolorvariant andinvertedprop
7. ✅ Clarified Responses
| Topic | Clarified Response |
|---|---|
| Size variants | Only three sizes: small, medium, large. No xlarge variant exists in new design. |
| Icon sizes | Small: 24x24px, Medium: 24x24px, Large: 32x32px icons. Large size scales icon up. |
| Focus state implementation | Focus state is being updated library-wide. Inconsistency during transition is expected and acceptable. |
| Focus color | New focus color #006dcc is part of the library-wide focus update, not component-specific. |
8. Updated CSS with Fallbacks Added
| Current CSS (No Fallback) | Updated CSS (With Fallback) | Location |
|---|---|---|
color: var(--goa-icon-button-default-color); |
color: var(--goa-icon-button-default-color, #0070c4); |
.color |
color: var(--goa-icon-button-default-hover-color); |
color: var(--goa-icon-button-default-hover-color, #004f84); |
.color:hover |
background-color: var(--goa-icon-button-default-hover-color-bg); |
background-color: var(--goa-icon-button-default-hover-color-bg, #f2f0f0); |
.color:hover |
color: var(--goa-icon-button-default-disabled-color); |
color: var(--goa-icon-button-default-disabled-color, #80b7e1); |
.color:disabled |
color: var(--goa-icon-button-light-color); |
color: var(--goa-icon-button-light-color, #ffffff); |
.light |
background-color: var(--goa-icon-button-light-hover-color-bg); |
background-color: var(--goa-icon-button-light-hover-color-bg, #666666); |
.light:hover |
color: var(--goa-icon-button-light-disabled-color); |
color: var(--goa-icon-button-light-disabled-color, #949494); |
.light:disabled |
color: var(--goa-icon-button-dark-color); |
color: var(--goa-icon-button-dark-color, #333333); |
.dark |
background-color: var(--goa-icon-button-dark-hover-color-bg); |
background-color: var(--goa-icon-button-dark-hover-color-bg, #f2f0f0); |
.dark:hover |
color: var(--goa-icon-button-dark-disabled-color-bg); |
color: var(--goa-icon-button-dark-disabled-color-bg, #949494); |
.dark:disabled |
color: var(--goa-icon-button-destructive-color); |
color: var(--goa-icon-button-destructive-color, #da291c); |
.destructive |
background-color: var(--goa-icon-button-destructive-hover-color-bg); |
background-color: var(--goa-icon-button-destructive-hover-color-bg, #fdded9); |
.destructive:hover |
color: var(--goa-icon-button-destructive-disabled-color); |
color: var(--goa-icon-button-destructive-disabled-color, #f58185); |
.destructive:disabled |
padding: var(--goa-icon-button-medium-padding); |
padding: var(--goa-icon-button-small-padding, 4px); |
.goa-icon-button--small |
padding: var(--goa-icon-button-medium-padding); |
padding: var(--goa-icon-button-medium-padding, 8px); |
.goa-icon-button--medium |
padding: var(--goa-icon-button-large-padding); |
padding: var(--goa-icon-button-large-padding, 12px); |
.goa-icon-button--large |
border-radius: var(--goa-icon-button-medium-border-radius); |
border-radius: var(--goa-icon-button-medium-border-radius, 8px); |
button |
box-shadow: 0 0 0 3px var(--goa-color-interactive-focus); |
border: 2px solid var(--goa-icon-button-focus-border-color, #006dcc); |
button:focus-visible (updated implementation) |
9. Cross-Component Impact Analysis
| Shared Token | Used By Components | Impact Assessment |
|---|---|---|
| Focus implementation pattern | All interactive components | Library-wide focus update in progress - temporary inconsistency expected |
| New focus color (#006dcc) | All interactive components | Part of global focus system update, not component-specific |
{space.xs} for large padding |
Multiple components | Icon button large size increases from 8px to 12px - isolated impact |
{borderRadius.xl} |
Card, Modal, other components | No impact - icon button maintains existing usage |
| Icon sizing pattern | Icon, other icon-containing components | Large size icons scale to 32px - verify consistency with other components |
10. Implementation Risks & Mitigation
| Risk | Impact | Mitigation Strategy |
|---|---|---|
| Focus implementation breaking accessibility | Screen readers and keyboard navigation affected | Test with assistive technologies, maintain semantic focus behavior |
| Box-shadow to border change affecting layout | Visual misalignment in existing layouts | Provide migration guide, test in common layout patterns |
| Padding changes affecting icon alignment | Icons may appear off-center or poorly scaled | Test with various icon types and sizes, especially 32px large icons |
| Focus implementation transition period | Temporary inconsistency across components during library-wide update | Expected behavior - document transition timeline |
| Large size padding change breaking existing designs | Buttons may be too large in constrained layouts | Provide backwards compatibility class or migration timeline |
| Icon size scaling affecting layout | 32px icons in large buttons may break existing layouts | Test in common use cases, document size changes |
Handoff Checklist for Implementation
Before proceeding to the component-style-update-process.md implementation phase, ensure:
- Complete design token inventory generated
- All tokens without fallbacks identified and documented
- Breaking changes documented with clear migration paths
- Edge cases and clarifications resolved with user
- Cross-component impact assessed and documented
- Implementation risks identified with mitigation strategies
- Specification document complete and ready for AI implementation
- User has reviewed and approved all proposed changes
Additional Context
Current Implementation Files Analyzed:
- Global tokens:
/design-tokens/data/goa-global-design-tokens.json - Component tokens:
/design-tokens/data/component-design-tokens/icon-button-design-tokens.json - IconButton component:
/ui-components/libs/web-components/src/components/icon-button/IconButton.svelte
Figma Designs Analyzed:
- Icon button component:
https://www.figma.com/design/Kkd4vrWhbQ9Oqv0WufXbXC/v2.0?node-id=11507-386977
Key Changes Summary:
- Focus implementation switched from box-shadow to border-based system
- Refined hover background colors for better visual hierarchy
- Updated padding for large size buttons (8px → 12px)
- Updated border-radius for small/medium sizes (4px → 8px)
- Large size icon scaling (24px → 32px)
- Library-wide focus color update (#006dcc)
- Backward compatibility maintained for all existing props and variants