mi6
Update button interaction state behaviour
Summary
Buttons apply the interaction state colour variants of the action colour to the background, borders and foreground. This should be simplified as detailed below.
💬 Description
Buttons should use the following tokens in each of their interaction states:
Primary button
| State | Fill | Border | Foreground |
|---|---|---|---|
| Default | --ic-action-default |
None | --ic-color-primary-text or --ic-color-white-text |
| Hover | --ic-action-default-hover |
None | --ic-color-primary-text or --ic-color-white-text |
| Active | --ic-action-default-active |
None | --ic-color-primary-text or --ic-color-white-text |
Secondary button
| State | Fill | Border | Foreground |
|---|---|---|---|
| Default | None | --ic-action-default |
--ic-action-contrast-text |
| Hover | --ic-action-default-bg-hover |
--ic-action-default-hover |
--ic-action-contrast-text |
| Active | --ic-action-default-bg-active |
--ic-action-default-active |
--ic-action-contrast-text |
Tertiary button
| State | Fill | Border | Foreground |
|---|---|---|---|
| Default | None | None | --ic-action-contrast-text |
| Hover | --ic-action-default-bg-hover |
None | --ic-action-contrast-text |
| Active | --ic-action-default-bg-active |
None | --ic-action-contrast-text |
Need to apply these changes to the dark and light variants of buttons as well. Need to apply these changes to the dropdown buttons as well.
💰 Use value
These changes will make it easier to theme button component with custom action colour. It will ensure good colour contrast between foreground and background.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that a button exists When interacting with it Then the relevant interaction states should be displayed and observe the changes listed above.
✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance If there's written guidance or documentation, include a link to it here.
Additional info
Tell us anything else useful to help us understand your suggestion.
