Merge pull request #285 from chakra-ui/fix/icon-button-type-attr

fix/icon button type attr

Author: codebender828

.changeset/tasty-grapes-rhyme.md

@@ -0,0 +1,42 @@
+---
+"@chakra-ui/c-visually-hidden": patch
+"@chakra-ui/c-theme-provider": patch
+"@chakra-ui/vue-composables": patch
+"@chakra-ui/c-close-button": patch
+"@chakra-ui/c-form-control": patch
+"@chakra-ui/c-media-query": patch
+"@chakra-ui/c-scroll-lock": patch
+"@chakra-ui/c-breadcrumb": patch
+"@chakra-ui/c-color-mode": patch
+"@chakra-ui/c-focus-lock": patch
+"@chakra-ui/c-accordion": patch
+"@chakra-ui/c-pin-input": patch
+"@chakra-ui/c-checkbox": patch
+"@chakra-ui/c-skip-nav": patch
+"@chakra-ui/vue-test-utils": patch
+"@chakra-ui/c-popover": patch
+"@chakra-ui/c-spinner": patch
+"@chakra-ui/c-avatar": patch
+"@chakra-ui/c-button": patch
+"@chakra-ui/c-motion": patch
+"@chakra-ui/c-popper": patch
+"@chakra-ui/c-portal": patch
+"@chakra-ui/vue-accessibilty": patch
+"@chakra-ui/c-alert": patch
+"@chakra-ui/c-image": patch
+"@chakra-ui/c-input": patch
+"@chakra-ui/c-modal": patch
+"@chakra-ui/c-reset": patch
+"@chakra-ui/c-toast": patch
+"@chakra-ui/c-code": patch
+"@chakra-ui/c-icon": patch
+"@chakra-ui/c-menu": patch
+"@chakra-ui/vue-layout": patch
+"@chakra-ui/vue-styled": patch
+"@chakra-ui/vue-system": patch
+"@chakra-ui/c-tag": patch
+"@chakra-ui/vue-utils": patch
+"@chakra-ui/vue-next": patch
+---
+
+Fix: Passthrough user-defined type attr for all button/iconbuttons

packages/c-button/src/button.tsx

@@ -14,10 +14,7 @@ import {
   ComponentWithProps,
   DeepPartial,
 } from "@chakra-ui/vue-system"
-import {
-  ThemingProps,
-  SystemStyleObject
-} from "@chakra-ui/styled-system"
+import { ThemingProps, SystemStyleObject } from "@chakra-ui/styled-system"
 import { dataAttr, filterUndefined, mergeWith } from "@chakra-ui/utils"
 import { useButtonGroup } from "./button-group"
 import { CIcon, IconProps } from "@chakra-ui/c-icon"
@@ -110,7 +107,7 @@ const CButtonIcon = defineComponent({
   },
 })
 
-export interface CButtonProps extends HTMLChakraProps<"button"> { }
+export interface CButtonProps extends HTMLChakraProps<"button"> {}
 
 /**
  * CButton
@@ -205,7 +202,8 @@ export const CButton = defineComponent({
           {...((props.value.isDisabled || props.value.isLoading) && {
             disabled: props.value.isDisabled || props.value.isLoading,
           })}
-          type={props.value.as === "button" ? undefined : props.value.type}
+          type={props.value.type}
+          data-type={dataAttr(props.value.type)}
           data-active={dataAttr(props.value.isActive)}
           data-loading={dataAttr(props.value.isLoading)}
           __css={buttonStyles.value}