Content-Length: 419077 | pFad | http://github.com/home-assistant/frontend/pull/25564

38 Redesign ha-button by wendevlin · Pull Request #25564 · home-assistant/frontend · GitHub
Skip to content

Redesign ha-button #25564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 20 commits into
base: dev
Choose a base branch
from
Open

Redesign ha-button #25564

wants to merge 20 commits into from

Conversation

wendevlin
Copy link
Contributor

@wendevlin wendevlin commented May 22, 2025

Proposed change

  • use shoelace-button for ha-button
  • migrate all buttons

image

image

image

image

Type of change

  • Dependency upgrade
  • Bugfix (non-breaking change which fixes an issue)
  • New feature (thank you!)
  • Breaking change (fix/feature causing existing functionality to break)
  • Code quality improvements to existing code or addition of tests

Example configuration

Additional information

  • This PR fixes or closes issue: fixes #
  • This PR is related to issue or discussion:
  • Link to documentation pull request:

Checklist

  • The code change is tested and works locally.
  • There is no commented out code in this PR.
  • Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
@bramkragten
Copy link
Member

bramkragten commented May 23, 2025

Is the focus style like this on purpose?

CleanShot 2025-05-23 at 11 01 18@2x

I would expect something similar to other focus styles:
image

I also miss active styles atm

I think in some places the buttons could use more padding

or align better with the radius of the dialogs for example:

Now:
CleanShot 2025-05-23 at 11 07 54@2x

Proposed:
CleanShot 2025-05-23 at 11 08 36@2x

Same for in card footers, it feels a bit cramped?

CleanShot 2025-05-23 at 11 09 04@2x

Maybe we should use the small variant there even?

Disabled danger buttons, don't really look disabled?

CleanShot 2025-05-23 at 11 10 54@2x

Shouldn't this add button just be a normal button?

So remove the appearance="filled"

CleanShot 2025-05-23 at 11 14 23@2x

It is in draft, so you might know about it already:

Some buttons are using a class to make it red, and are not updated yet:
CleanShot 2025-05-23 at 11 38 45@2x

Colors of the done button in lovelace edit mode look a bit weird on that background:
CleanShot 2025-05-23 at 11 40 56@2x

@github-actions github-actions bot added Supervisor Related to the supervisor panel Cast Related to Home Assistant Cast UI Design Related to Home Assistant design gallery labels May 26, 2025
@wendevlin wendevlin added the Landingpage Related to the landingpage build label May 26, 2025
@wendevlin wendevlin marked this pull request as ready for review May 26, 2025 14:26
@bramkragten bramkragten mentioned this pull request May 26, 2025
9 tasks
@nagtegaal
Copy link

I love the fact that the intent is to bring a more uniform UI to HA.

Some notes on my part:

  • Make the description of the action that the button executes more clear;
  • Primary action: align to the right, secondary action to the left of that. (Usability) Then always have a button on the left side to cancel the current action.
  • Make all buttons look like buttons, and make sure that the styling reflects the action or it's state (disabled, primary action, secondary action, cancel, etc).

image

https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Cast Related to Home Assistant Cast UI cla-signed Design Related to Home Assistant design gallery Landingpage Related to the landingpage build Supervisor Related to the supervisor panel
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/home-assistant/frontend/pull/25564

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy