Add button loading states #741
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…est descriptions, and enhance shimmer effect for loading state
…nd remove redundant styleType checks
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…er effect direction in styles. Ensure proper formatting in dark theme variables file.
DreaminDani
reviewed
Dec 29, 2025
Enhance Button component tests by adding multiple scenarios for the loading state, including aria-disabled attribute, preventing onClick execution, and ensuring the label is rendered correctly. Cover loading states for various button types: primary, secondary, danger, and empty.
…r consistency and improved readability
…e tokens for improved consistency and readability
src/components/Button/Button.tsx
Outdated
| @@ -1,5 +1,5 @@ | |||
| import { Icon, IconName } from "@/components"; | |||
| import { styled } from "styled-components"; | |||
| import { styled, keyframes, css } from "styled-components"; | |||
Member
There was a problem hiding this comment.
@vineethasok can you chime in here? Aren't you in the process of removing styled-components? Is this something we should implement with a different piece of technology?
Member
Author
There was a problem hiding this comment.
@hoorayimhelping @vineethasok I’m happy to leave this PR as a draft as a POC, or I can just create a PR with the new gradient tokens. Let me know what works best.
…ased on style type
vineethasok
reviewed
Jan 2, 2026
Eliminated the unused 'css' import from styled-components in Button.tsx and replaced template literal usages to remove dependency on the css helper.
vineethasok
approved these changes
Jan 2, 2026
Replaces template literal keyframes with object syntax for shimmer animations and moves shimmer logic from styled-components CSS to data attributes and prop-based logic. This simplifies the loading state handling and improves maintainability.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Adds loading states to the Button component with a CSS-based shimmer animation effect.
Changes
Button Component
loadingprop with shimmer animation using::beforepseudo-elementshimmerFullWidth(percentage-based) andshimmerFixedWidth(200px)aria-disabled="true"for a11ycursor: not-allowedTheme Tokens
loadinggradient to button background tokens for all types (primary, secondary, danger, empty)Tests
How to test
https://click-ui-git-add-button-loading-states-clickhouse.vercel.app/?path=/docs/buttons-button--docs