Skip to content

Commit e3013cf

Browse files
feat: add Ref to button (#23)
1 parent 7da3c03 commit e3013cf

File tree

2 files changed

+25
-8
lines changed

2 files changed

+25
-8
lines changed

.changeset/swift-bats-drive.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@zenml-io/react-component-library": patch
3+
---
4+
5+
add ref to button component

src/components/button/Button.tsx

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { ButtonHTMLAttributes } from "react";
1+
import React, { ButtonHTMLAttributes, forwardRef } from "react";
22
import { Slot } from "@radix-ui/react-slot";
33
import { type VariantProps, cva } from "class-variance-authority";
44
import { cn } from "../../utilities/index";
@@ -18,9 +18,9 @@ const buttonVariants = cva(
1818
danger: ""
1919
},
2020
size: {
21-
sm: "py-1 px-2",
22-
lg: "py-2 px-3",
23-
xl: "py-3 px-5"
21+
sm: "py-1 px-2 text-text-sm",
22+
lg: "py-2 px-3 text-text-md",
23+
xl: "py-3 px-5 text-text-lg"
2424
}
2525
},
2626
compoundVariants: [
@@ -96,7 +96,19 @@ export interface ButtonProps
9696
asChild?: boolean;
9797
}
9898

99-
export function Button({ intent, size, className, asChild, emphasis, ...rest }: ButtonProps) {
100-
const Comp = asChild ? Slot : "button";
101-
return <Comp className={cn(buttonVariants({ intent, size, emphasis }), className)} {...rest} />;
102-
}
99+
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
100+
({ intent, size, className, asChild, emphasis, ...rest }, ref) => {
101+
const Comp = asChild ? Slot : "button";
102+
return (
103+
<Comp
104+
ref={ref}
105+
className={cn(buttonVariants({ intent, size, emphasis }), className)}
106+
{...rest}
107+
/>
108+
);
109+
}
110+
);
111+
112+
Button.displayName = "Button";
113+
114+
export { Button };

0 commit comments

Comments
 (0)