Add a reusable <Button/> component #274
Open
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
✅ Deploy Preview for criipto-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
To further align the documentation with the design system.
nmoskaleva
force-pushed
the
add-button
branch
from
cedd189 to
a40798b
Compare
jlndk
reviewed
Jan 22, 2026
src/components/Button/Button.tsx
Outdated
Comment on lines
27
to
43
| const variants = { | ||
| primary: cx('bg-primary-600 text-white', !isDisabled && 'hover:bg-primary-800'), | ||
| default: cx( | ||
| 'border border-light-blue-700/30 text-light-blue-800 bg-transparent', | ||
| !isDisabled && 'hover:bg-primary-600/10', | ||
| ), | ||
| dark: cx( | ||
| 'bg-transparent border border-white/40 text-white', | ||
| !isDisabled && 'hover:bg-white/20', | ||
| ), | ||
| }; | ||
|
|
||
| const sizes = { | ||
| sm: 'h-8 leading-4', | ||
| md: 'h-10 leading-4', | ||
| lg: 'h-12 leading-5 text-base', | ||
| }; |
Contributor
There was a problem hiding this comment.
For extra type-safety and to produce more actionable error messages when we add new variants, I would propose adding an explicit type annotation to these definitions
Suggested change
| const variants = { | |
| primary: cx('bg-primary-600 text-white', !isDisabled && 'hover:bg-primary-800'), | |
| default: cx( | |
| 'border border-light-blue-700/30 text-light-blue-800 bg-transparent', | |
| !isDisabled && 'hover:bg-primary-600/10', | |
| ), | |
| dark: cx( | |
| 'bg-transparent border border-white/40 text-white', | |
| !isDisabled && 'hover:bg-white/20', | |
| ), | |
| }; | |
| const sizes = { | |
| sm: 'h-8 leading-4', | |
| md: 'h-10 leading-4', | |
| lg: 'h-12 leading-5 text-base', | |
| }; | |
| const variants: Record<BaseButtonProps['variant'], string> = { | |
| primary: cx('bg-primary-600 text-white', !isDisabled && 'hover:bg-primary-800'), | |
| default: cx( | |
| 'border border-light-blue-700/30 text-light-blue-800 bg-transparent', | |
| !isDisabled && 'hover:bg-primary-600/10', | |
| ), | |
| dark: cx( | |
| 'bg-transparent border border-white/40 text-white', | |
| !isDisabled && 'hover:bg-white/20', | |
| ), | |
| }; | |
| const sizes: Record<BaseButtonProps['size'], string> = { | |
| sm: 'h-8 leading-4', | |
| md: 'h-10 leading-4', | |
| lg: 'h-12 leading-5 text-base', | |
| }; |
src/components/Button/Button.tsx
Outdated
Comment on lines
27
to
37
| const variants = { | ||
| primary: cx('bg-primary-600 text-white', !isDisabled && 'hover:bg-primary-800'), | ||
| default: cx( | ||
| 'border border-light-blue-700/30 text-light-blue-800 bg-transparent', | ||
| !isDisabled && 'hover:bg-primary-600/10', | ||
| ), | ||
| dark: cx( | ||
| 'bg-transparent border border-white/40 text-white', | ||
| !isDisabled && 'hover:bg-white/20', | ||
| ), | ||
| }; |
Contributor
There was a problem hiding this comment.
This might be personal preference, but since you're using classNames, I would propose using the object syntax to define the conditional classes instead, since it makes it much easier to add multiple cases in the future.
Suggested change
| const variants = { | |
| primary: cx('bg-primary-600 text-white', !isDisabled && 'hover:bg-primary-800'), | |
| default: cx( | |
| 'border border-light-blue-700/30 text-light-blue-800 bg-transparent', | |
| !isDisabled && 'hover:bg-primary-600/10', | |
| ), | |
| dark: cx( | |
| 'bg-transparent border border-white/40 text-white', | |
| !isDisabled && 'hover:bg-white/20', | |
| ), | |
| }; | |
| const variants = { | |
| primary: cx('bg-primary-600 text-white', { 'hover:bg-primary-800': !isDisabled }), | |
| default: cx( | |
| 'border border-light-blue-700/30 text-light-blue-800 bg-transparent', | |
| { 'hover:bg-primary-600/10': !isDisabled }, | |
| ), | |
| dark: cx( | |
| 'bg-transparent border border-white/40 text-white', | |
| { 'hover:bg-white/20': !isDisabled }, | |
| ), | |
| }; |
src/components/Button/Button.tsx
Outdated
| return cx(base, variants[props.variant], sizes[size], iconPadding, isDisabled && 'opacity-40'); | ||
| } | ||
|
|
||
| function Inner(props: BaseButtonProps & (TextButtonProps | IconButtonProps)) { |
Contributor
There was a problem hiding this comment.
Proposing renaming this to ButtonContent to better describe the component
src/components/Button/Button.tsx
Outdated
| extends React.ButtonHTMLAttributes<HTMLButtonElement>, | ||
| BaseButtonProps {} | ||
|
|
||
| export default function Button({ |
Contributor
There was a problem hiding this comment.
Propose removing the default from the export, since it improves auto-complete discoverability and consistency in imports
See more: https://dev.to/phuocng/avoid-using-default-exports-a1c
src/components/Header.tsx
Outdated
Comment on lines
220
to
224
| <Button variant="primary" size="sm" className="uppercase"> | ||
| <a href="https://dashboard.idura.app/signup?utm_source=docs" target="_blank"> | ||
| Sign up | ||
| </a> | ||
| </Button> |
Contributor
There was a problem hiding this comment.
This might be a potential use for the AnchorButton?
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.
To further align the documentation with the design system.
QA: Please check the updated buttons:
button: https://deploy-preview-274--criipto-docs.netlify.app/signatures/webhooks/tester/ (available after you input API credentials, or see screenshot).