diff --git a/packages/console-ui/button/index.tsx b/packages/console-ui/button/index.tsx
index 21052a5..53c843e 100644
--- a/packages/console-ui/button/index.tsx
+++ b/packages/console-ui/button/index.tsx
@@ -14,7 +14,7 @@ const bgcolormap = {
   red: "red",
 };
 
-export function Button({
+export const Button = React.forwardRef(function Button({
   onClick,
   color = "black",
   width = "auto",
@@ -27,9 +27,10 @@ export function Button({
   disabled?: boolean;
   width?: React.CSSProperties["width"];
   height?: React.CSSProperties["height"];
-} & React.PropsWithChildren) {
+} & React.PropsWithChildren, forwaredRef: React.Ref<HTMLButtonElement>) {
   return (
     <ButtonBase
+      ref={forwaredRef}
       onClick={onClick}
       disabled={disabled}
       textColor={textcolormap[color]}
@@ -42,7 +43,7 @@ export function Button({
       {children}
     </ButtonBase>
   );
-}
+})
 
 const ButtonBase = styled.button<{
   textColor: CSSProperties["color"];