Change button styles #11964

jrieke · 2025-07-17T02:16:39Z

Describe your changes

Changes the styles of buttons to this:

Screenshot.2025-07-17.at.16.46.40.mp4

GitHub Issue Link (if applicable)

Testing Plan

Updated snapshots
No additional tests since this is just a small visual change
Manually tested all different buttons, including primary/secondary/tertiary types, colored text, and disabled

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

snyk-io · 2025-07-17T02:16:48Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

github-actions · 2025-07-17T02:16:57Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-11964/streamlit-1.46.1-py3-none-any.whl
🕹️ Preview app	pr-11964.streamlit.app (☁️ Deploy here if not accessible)

lukasmasuch · 2025-07-17T16:25:12Z

frontend/lib/src/components/elements/LinkButton/styled-components.ts

-  "&:focus:not(:active)": {
-    borderColor: theme.colors.primary,
-    color: theme.colors.primary,


nit: I think this was used to show the button via the primary color if it was selected via tab? Is it intended that we don't apply a different look other than the border shadow?

Looked into this again. I decided to make the focus-visible style the same as the hover style for all buttons (+ focus-visible additionally shows the focus ring via box shadow). This way, the button gets properly highlighted when tabbing but doesn't keep the hovered style after it was pressed but is still in focus (which is annoying and was the reason I removed this previously).

lukasmasuch

LGTM 👍 But a couple of thoughts:

Do we also want to change this for pills and segmented button?
Have you tested this that its also applied correctly with download, popover, and form button?
The hover feels slightly too dark... maybe something like darkenedBgMix10 would be better here. But probably fine since we are using the same color for menus as well.
There is a bit of weirdness if the button label contains any form of coloured text:

Screen.Recording.2025-07-17.at.18.05.18.mov

jrieke · 2025-07-17T23:05:33Z

Do we also want to change this for pills and segmented button?

~~Probably yes, still discussing with Jessi, will play around in a separate PR.~~ OK added it to this PR.

Have you tested this that its also applied correctly with download, popover, and form button?

Yes, all tested.

The hover feels slightly too dark... maybe something like darkenedBgMix10 would be better here. But probably fine since we are using the same color for menus as well.

Yeah, we wanted to keep it consistent with those buttons.

There is a bit of weirdness if the button label contains any form of coloured text:

Great find, fixed.

Copilot

Pull Request Overview

This PR updates the styling behavior of buttons across the Streamlit frontend, changing how they appear during hover, focus, and active states. The changes standardize the visual feedback patterns and improve the user experience by making button interactions more consistent.

Key changes include:

Consolidating hover and focus-visible styles using combined selectors
Updating primary button hover colors to use darker shades and consistent border colors
Replacing secondary button color-changing hover effects with background color changes
Simplifying tertiary button interactions by moving primary color application from active to hover state

Reviewed Changes

Copilot reviewed 2 out of 47 changed files in this pull request and generated no comments.

File	Description
frontend/lib/src/components/shared/BaseButton/styled-components.ts	Updates button styling for all button types (primary, secondary, tertiary, ghost) and button groups with new hover/focus behaviors
frontend/lib/src/components/elements/LinkButton/styled-components.ts	Applies the same styling changes to link buttons to maintain consistency with regular buttons

jrieke · 2025-07-18T01:25:54Z

frontend/lib/src/components/elements/LinkButton/styled-components.ts

+      color: "inherit !important",
+    },
  },
-  "&:focus": {


These were redundant since they are already in the base class.

jrieke · 2025-07-18T01:26:40Z

frontend/lib/src/components/shared/BaseButton/styled-components.ts

      width: containerWidth ? "100%" : "auto",
      cursor: "pointer",
      userSelect: "none",
-      "&:hover": {


This is only required for tertiary button now, so moved it there.

lukasmasuch

LGTM. One minor observation: when hovering segmented button, the left border seems to be more highlighted than the right border:

jrieke · 2025-07-18T15:24:06Z

One minor observation: when hovering segmented button, the left border seems to be more highlighted than the right border:

Yeah this is because the background color and border color both have transparency and overlap. Played around with this for a while and tried out different alternatives but can't really find a good one. I'll merge this as is for now and will file a task to investigate this more in Q3.

Change button styles

439bb7d

jrieke added security-assessment-completed Security assessment has been completed for PR change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Jul 17, 2025

jrieke added 6 commits July 17, 2025 04:30

Update link buttons to match buttons

04ee1c2

Change styles

a0b7fbb

Comment

1775ae8

Format

4c945da

Comment

105eb95

Update snapshots

40f3efd

jrieke changed the title ~~[Prototype] Change button styles~~ Change button styles Jul 17, 2025

jrieke marked this pull request as ready for review July 17, 2025 15:51

lukasmasuch requested a review from Copilot July 17, 2025 15:53

This comment was marked as outdated.

Sign in to view

lukasmasuch reviewed Jul 17, 2025

View reviewed changes

lukasmasuch approved these changes Jul 17, 2025

View reviewed changes

Fix for colored text

864f6d7

jrieke added 3 commits July 18, 2025 01:24

Handle focus states

527431e

Comment

45c940b

Apply same hover/active styles to st.pills and st.segmented_control

fe5d4d1

jrieke requested a review from Copilot July 17, 2025 23:42

Copilot AI reviewed Jul 17, 2025

View reviewed changes

jrieke added 4 commits July 18, 2025 02:45

Fix disabled and focus states

eb8d401

Remove active style for pills/segmented control

e1d7b01

Format

7df9da6

Update snapshots

f2e5d73

jrieke commented Jul 18, 2025

View reviewed changes

Fix button test for colored text

580aa0f

lukasmasuch approved these changes Jul 18, 2025

View reviewed changes

Fix disabled background

f487137

jrieke enabled auto-merge (squash) July 18, 2025 15:28

Update snapshots

bd15162

jrieke merged commit 5601852 into develop Jul 18, 2025
38 checks passed

jrieke deleted the feature/new-button-styles branch July 18, 2025 16:05

lukasmasuch mentioned this pull request Jul 18, 2025

[AdvancedLayouts] Adds a width parameter to st.popover #11799

Merged

Change button styles #11964

Change button styles #11964

Uh oh!

Conversation

jrieke commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

github-actions bot commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

This comment was marked as outdated.

Uh oh!

lukasmasuch Jul 17, 2025

Choose a reason for hiding this comment

Uh oh!

jrieke Jul 17, 2025 • 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!

lukasmasuch left a comment • 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!

jrieke commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

jrieke Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

jrieke Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

jrieke commented Jul 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jrieke commented Jul 17, 2025 •

edited

Loading

snyk-io bot commented Jul 17, 2025 •

edited

Loading

github-actions bot commented Jul 17, 2025 •

edited

Loading

jrieke Jul 17, 2025 •

edited

Loading

lukasmasuch left a comment •

edited

Loading

jrieke commented Jul 17, 2025 •

edited

Loading