Skip to content

Update button UX to consistent iconography and colors#60555

Merged
bbovenzi merged 1 commit intoapache:mainfrom
astronomer:fix-colors
Jan 20, 2026
Merged

Update button UX to consistent iconography and colors#60555
bbovenzi merged 1 commit intoapache:mainfrom
astronomer:fix-colors

Conversation

@bbovenzi
Copy link
Contributor

I wanted to clean up a lot of our buttons.

The buttons with text in the header of each details card was getting too cumbersome, so they are all now just icons.

Some icons like toggling groups or adjusting the logs page just didn't have the correct background colors.

Use our new ButtonToggleGroup component in more place.

Before:
Screenshot 2026-01-14 at 4 26 56 PM

After:
Screenshot 2026-01-14 at 4 52 41 PM

Was generative AI tooling used to co-author this PR?

  • Yes (please specify the tool below)

Cursor


  • Read the Pull Request Guidelines for more information. Note: commit author/co-author name and email in commits become permanently public when merged.
  • For fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
  • When adding dependency, check compliance with the ASF 3rd Party License Policy.
  • For significant user-facing changes create newsfragment: {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Jan 14, 2026
@choo121600
Copy link
Member

Thanks for the cleanup!
I think there are cases where having text labels on buttons is still valuable.
When actions are represented by icons only, it can be harder to immediately understand what they do.
For example, the clear action could easily be mistaken for retry when shown as an icon alone.

I do agree that the header actions can feel a bit cramped in narrower layouts.
As a possible compromise, what do you think about showing text + icon buttons when there’s enough horizontal space,
and falling back to icon-only buttons on smaller widths (responsive behavior)?

This way we keep clarity where possible, while still improving usability on smaller screens.

@bbovenzi
Copy link
Contributor Author

Thanks for the cleanup! I think there are cases where having text labels on buttons is still valuable. When actions are represented by icons only, it can be harder to immediately understand what they do. For example, the clear action could easily be mistaken for retry when shown as an icon alone.

I do agree that the header actions can feel a bit cramped in narrower layouts. As a possible compromise, what do you think about showing text + icon buttons when there’s enough horizontal space, and falling back to icon-only buttons on smaller widths (responsive behavior)?

This way we keep clarity where possible, while still improving usability on smaller screens.

I left tooltips on each button that preserves the text on hover.

@bbovenzi bbovenzi changed the title Fix colors Update button UX to consistent iconography and colors Jan 15, 2026
Copy link
Member

@guan404ming guan404ming left a comment

Choose a reason for hiding this comment

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

Looks really nice, thanks!

@bbovenzi bbovenzi merged commit 7c3379e into apache:main Jan 20, 2026
128 checks passed
@bbovenzi bbovenzi deleted the fix-colors branch January 20, 2026 20:16
jason810496 pushed a commit to jason810496/airflow that referenced this pull request Jan 22, 2026
amoghrajesh pushed a commit to astronomer/airflow that referenced this pull request Jan 22, 2026
suii2210 pushed a commit to suii2210/airflow that referenced this pull request Jan 26, 2026
shreyas-dev pushed a commit to shreyas-dev/airflow that referenced this pull request Jan 29, 2026
jhgoebbert pushed a commit to jhgoebbert/airflow_Owen-CH-Leung that referenced this pull request Feb 8, 2026
choo121600 pushed a commit to choo121600/airflow that referenced this pull request Feb 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants