diff --git a/src/Badge/Badge.stories.tsx b/src/Badge/Badge.stories.tsx
index e50ec903..1b764334 100644
--- a/src/Badge/Badge.stories.tsx
+++ b/src/Badge/Badge.stories.tsx
@@ -10,74 +10,56 @@ export default {
 } as Meta
 
 export const Default: Story<BadgeProps> = (args) => {
-  return <Badge {...args}>Example</Badge>
+  return <Badge {...args}>Badge</Badge>
 }
 Default.args = {}
 
-export const Colors: Story<BadgeProps> = (args) => {
+export const BrandColors: Story<BadgeProps> = (args) => {
   return (
-    <div>
-      <div>
-        <Badge {...args}>neutral</Badge>
-        <Badge {...args} color="primary">
-          primary
-        </Badge>
-        <Badge {...args} color="secondary">
-          secondary
-        </Badge>
-        <Badge {...args} color="accent">
-          accent
-        </Badge>
-        <Badge {...args} color="ghost">
-          ghost
-        </Badge>
-      </div>
-      <div>
-        <Badge {...args} color="success">
-          success
-        </Badge>
-        <Badge {...args} color="info">
-          info
-        </Badge>
-        <Badge {...args} color="warning">
-          warning
-        </Badge>
-        <Badge {...args} color="error">
-          error
-        </Badge>
-      </div>
+    <div className="flex gap-2 items-center">
+      <Badge {...args}>default</Badge>
+      <Badge {...args} color="neutral">
+        neutral
+      </Badge>
+      <Badge {...args} color="primary">
+        primary
+      </Badge>
+      <Badge {...args} color="secondary">
+        secondary
+      </Badge>
+      <Badge {...args} color="accent">
+        accent
+      </Badge>
+      <Badge {...args} color="ghost">
+        ghost
+      </Badge>
     </div>
   )
 }
-Colors.args = {
-  className: 'm-1'
-}
 
 export const Outline: Story<BadgeProps> = (args) => {
   return (
-    <div>
-      <Badge {...args} variant="outline">
-        neutral
-      </Badge>
-      <Badge {...args} color="primary" variant="outline">
+    <div className="flex gap-2 items-center">
+      <Badge {...args}>default</Badge>
+      <Badge {...args} color="primary">
         primary
       </Badge>
-      <Badge {...args} color="secondary" variant="outline">
+      <Badge {...args} color="secondary">
         secondary
       </Badge>
-      <Badge {...args} color="accent" variant="outline">
+      <Badge {...args} color="accent">
         accent
       </Badge>
     </div>
   )
 }
 Outline.args = {
-  className: 'm-1'
+  variant: 'outline',
 }
 
 export const Sizes: Story<BadgeProps> = (args) => {
   return (
-    <div>
+    <div className="flex gap-2 items-center">
       <Badge {...args} size="lg">
         987,654
       </Badge>
@@ -93,9 +75,6 @@ export const Sizes: Story<BadgeProps> = (args) => {
     </div>
   )
 }
-Sizes.args = {
-  className: 'm-1'
-}
 
 export const Empty: Story<BadgeProps> = (args) => {
   return (
@@ -107,17 +86,112 @@ export const Empty: Story<BadgeProps> = (args) => {
     </div>
   )
 }
-Empty.args = {}
+Empty.args = {
+  color: 'primary',
+}
 
-export const BadgeInText: Story<BadgeProps> = (args) => {
+export const StateColors: Story<BadgeProps> = (args) => {
   return (
     <div className="flex gap-2 items-center">
-      <h2 className="text-xl gap-2">
-        Heading{' '}
+      <Badge {...args} color="info">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="inline-block w-4 h-4 stroke-current"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+        info
+      </Badge>
+      <Badge {...args} color="success">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="inline-block w-4 h-4 stroke-current"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+        success
+      </Badge>
+      <Badge {...args} color="warning">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="inline-block w-4 h-4 stroke-current"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+        warning
+      </Badge>
+      <Badge {...args} color="error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="inline-block w-4 h-4 stroke-current"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          ></path>
+        </svg>
+        error
+      </Badge>
+    </div>
+  )
+}
+StateColors.args = {
+  className: 'gap-2',
+}
+
+export const BadgeInText: Story<BadgeProps> = (args) => {
+  return (
+    <div className="flex flex-col gap-2 items-center">
+      <h2 className="text-xl">
+        Heading
         <Badge {...args} size="lg">
           NEW
         </Badge>
       </h2>
+      <h3 className="text-xl">
+        Heading
+        <Badge {...args} size="md">
+          NEW
+        </Badge>
+      </h3>
+      <h4 className="text-base">
+        Heading
+        <Badge {...args} size="sm">
+          NEW
+        </Badge>
+      </h4>
+
+      <h5 className="text-sm">
+        Heading
+        <Badge {...args} size="xs">
+          NEW
+        </Badge>
+      </h5>
     </div>
   )
 }
@@ -126,13 +200,13 @@ BadgeInText.args = {}
 export const BadgeInAButton: Story<BadgeProps> = (args) => {
   return (
     <div className="flex gap-2 items-center">
-      <Button className="gap-2">
+      <Button>
         Inbox
         <Badge {...args}>+99</Badge>
       </Button>
-      <Button className="gap-2">
+      <Button>
         Inbox
-        <Badge {...args} color="primary">
+        <Badge {...args} color="secondary">
           +99
         </Badge>
       </Button>
diff --git a/src/Badge/Badge.tsx b/src/Badge/Badge.tsx
index 48436142..26d97276 100644
--- a/src/Badge/Badge.tsx
+++ b/src/Badge/Badge.tsx
@@ -37,6 +37,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
         'badge-sm': size === 'sm',
         'badge-xs': size === 'xs',
         'badge-outline': variant === 'outline' || outline,
+        'badge-neutral': color === 'neutral',
         'badge-primary': color === 'primary',
         'badge-secondary': color === 'secondary',
         'badge-accent': color === 'accent',
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 4e7354d8..7e194818 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -16,62 +16,55 @@ export default {
   },
 } as Meta
 
-const Template: Story<ButtonProps> = (args) => {
-  return <Button {...args} />
-}
-export const Default = Template.bind({})
-Default.args = {
-  children: 'Button',
+export const Default: Story<ButtonProps> = (args) => {
+  return <Button {...args}>Button</Button>
 }
 
-export const Colors: Story<ButtonProps> = (args) => {
+export const BrandColors: Story<ButtonProps> = (args) => {
   return (
-    <div>
-      <div>
-        <Button {...args}>Default</Button>
-        <Button {...args} color="neutral">
-          Neutral
-        </Button>
-        <Button {...args} color="primary">
-          Primary
-        </Button>
-        <Button {...args} color="secondary">
-          Secondary
-        </Button>
-        <Button {...args} color="accent">
-          Accent
-        </Button>
-        <Button {...args} color="ghost">
-          Ghost
-        </Button>
-      </div>
-      <div>
-        <Button {...args} color="success">
-          Success
-        </Button>
-        <Button {...args} color="info">
-          Info
-        </Button>
-        <Button {...args} color="warning">
-          Warning
-        </Button>
-        <Button {...args} color="error">
-          Error
-        </Button>
-      </div>
+    <div className="flex items-center gap-2">
+      <Button {...args}>Default</Button>
+      <Button {...args} color="neutral">
+        Neutral
+      </Button>
+      <Button {...args} color="primary">
+        Primary
+      </Button>
+      <Button {...args} color="secondary">
+        Secondary
+      </Button>
+      <Button {...args} color="accent">
+        Accent
+      </Button>
+      <Button {...args} color="ghost">
+        Ghost
+      </Button>
+      <Button {...args} variant="link">
+        Link
+      </Button>
     </div>
   )
 }
-Colors.args = {
-  className: 'm-1',
-}
+BrandColors.args = {}
 
-export const Variants: Story<ButtonProps> = (args) => {
+export const ActiveButtons: Story<ButtonProps> = (args) => {
   return (
-    <div className="flex gap-x-2">
+    <div className="flex items-center gap-2">
       <Button {...args}>Default</Button>
-      <Button {...args} variant="outline">
-        Outline
+      <Button {...args} color="neutral">
+        Neutral
+      </Button>
+      <Button {...args} color="primary">
+        Primary
+      </Button>
+      <Button {...args} color="secondary">
+        Secondary
+      </Button>
+      <Button {...args} color="accent">
+        Accent
+      </Button>
+      <Button {...args} color="ghost">
+        Ghost
       </Button>
       <Button {...args} variant="link">
         Link
@@ -79,50 +72,97 @@ export const Variants: Story<ButtonProps> = (args) => {
     </div>
   )
 }
+ActiveButtons.args = { active: true }
 
-export const Icons: Story<ButtonProps> = (args) => {
-  const favoriteIcon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
-        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-      />
-    </svg>
+export const StateColors: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args} color="info">
+        Info
+      </Button>
+      <Button {...args} color="success">
+        Success
+      </Button>
+      <Button {...args} color="warning">
+        Warning
+      </Button>
+      <Button {...args} color="error">
+        Error
+      </Button>
+    </div>
+  )
+}
+StateColors.args = {}
+
+export const OutlineButtons: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>Default</Button>
+      <Button {...args} color="primary">
+        Primary
+      </Button>
+      <Button {...args} color="secondary">
+        Secondary
+      </Button>
+      <Button {...args} color="accent">
+        Accent
+      </Button>
+    </div>
   )
+}
+OutlineButtons.args = {
+  variant: 'outline',
+}
 
+export const OutlineButtonsWithStateColors: Story<ButtonProps> = (args) => {
   return (
-    <div className="flex gap-x-2">
-      <Button {...args} startIcon={favoriteIcon}>
-        Icon at Start
+    <div className="flex items-center gap-2">
+      <Button {...args} color="info">
+        Info
+      </Button>
+      <Button {...args} color="success">
+        Success
       </Button>
-      <Button {...args} endIcon={favoriteIcon}>
-        Icon at End
+      <Button {...args} color="warning">
+        Warning
+      </Button>
+      <Button {...args} color="error">
+        Error
       </Button>
     </div>
   )
 }
+OutlineButtonsWithStateColors.args = {
+  variant: 'outline',
+}
 
-export const AsHref: Story<ButtonProps> = (args) => {
+export const ButtonSizes: Story<ButtonProps> = (args) => {
   return (
-    <div className="flex gap-x-2">
-      <Button
-        {...args}
-        onClick={() => alert('See, I have an onClick event and no href.')}
-      >
-        I'm a {`<button>`}
+    <div className="flex items-center gap-2">
+      <Button {...args} size="lg">
+        Large
+      </Button>
+      <Button {...args}>Normal</Button>
+      <Button {...args} size="sm">
+        Small
+      </Button>
+      <Button {...args} size="xs">
+        Tiny
       </Button>
-      <Button href="https://google.com">I'm an {`<a>`}</Button>
     </div>
   )
 }
+ButtonSizes.args = {}
+
+export const ResponsiveButton: Story<ButtonProps> = (args) => {
+  return <Button {...args}>Responsive</Button>
+}
+ResponsiveButton.args = { responsive: true }
+
+export const WideButton: Story<ButtonProps> = (args) => {
+  return <Button {...args}>Wide</Button>
+}
+WideButton.args = { wide: true }
 
 export const Glass: Story<ButtonProps> = (args) => {
   return (
@@ -140,3 +180,218 @@ export const Glass: Story<ButtonProps> = (args) => {
 Glass.args = {
   glass: true,
 }
+
+export const DifferentHtmlTags: Story<
+  ButtonProps<'main', React.HtmlHTMLAttributes<HTMLElement>>
+> = (args) => {
+  return (
+    <div className="flex gap-2 items-center justify-center">
+      <Button {...args} tag="a" role="button">
+        Link
+      </Button>
+      <Button {...args} type="submit">
+        Button
+      </Button>
+      <Button {...args} tag="input" type="button" value="Input" />
+      <Button {...args} tag="input" type="submit" value="Submit" />
+      <Button {...args} tag="input" type="radio" aria-label="Radio" />
+      <Button {...args} tag="input" type="checkbox" aria-label="Checkbox" />
+      <Button {...args} tag="input" type="reset" value="Reset" />
+    </div>
+  )
+}
+DifferentHtmlTags.args = {}
+
+export const DisabledButtons: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>Disabled using attribute</Button>
+      <Button
+        className="btn btn-disabled"
+        tabIndex={-1}
+        role="button"
+        aria-disabled="true"
+      >
+        Disabled using class name
+      </Button>
+    </div>
+  )
+}
+DisabledButtons.args = {
+  disabled: true,
+}
+
+export const SquareButton: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </Button>
+      <Button {...args} variant="outline">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </Button>
+    </div>
+  )
+}
+SquareButton.args = {
+  shape: 'square',
+}
+
+export const CircleButton: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </Button>
+      <Button {...args} variant="outline">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </Button>
+    </div>
+  )
+}
+CircleButton.args = {
+  shape: 'circle',
+}
+
+export const IconAtStart: Story<ButtonProps> = (args) => {
+  return (
+    <Button
+      {...args}
+      startIcon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+          />
+        </svg>
+      }
+    >
+      Button
+    </Button>
+  )
+}
+
+export const IconAtEnd: Story<ButtonProps> = (args) => {
+  return (
+    <Button
+      {...args}
+      endIcon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+          />
+        </svg>
+      }
+    >
+      Button
+    </Button>
+  )
+}
+
+export const ButtonBlock: Story<ButtonProps> = (args) => {
+  return <Button {...args}>Block</Button>
+}
+ButtonBlock.args = {
+  fullWidth: true,
+}
+
+export const LoadingSpinner: Story<ButtonProps> = (args) => {
+  return <Button {...args} />
+}
+LoadingSpinner.args = {
+  loading: true,
+  shape: 'square',
+}
+
+export const LoadingSpinnerAndText: Story<ButtonProps> = (args) => {
+  return <Button {...args}>loading</Button>
+}
+LoadingSpinnerAndText.args = {
+  loading: true,
+}
+
+export const WithoutClickAnimation: Story<ButtonProps> = (args) => {
+  return <Button {...args}> I don't have click animation </Button>
+}
+WithoutClickAnimation.args = {
+  animation: false,
+}
+
+export const LinkButton: Story<ButtonProps<'a'>> = (args) => {
+  return <Button {...args}> Link </Button>
+}
+LinkButton.args = {
+  tag: 'a',
+  target: '_blank',
+  rel: 'noopener',
+  href: 'https://daisyui.com/',
+}
diff --git a/src/Button/Button.test.tsx b/src/Button/Button.test.tsx
index 9b78f937..7d0bff07 100644
--- a/src/Button/Button.test.tsx
+++ b/src/Button/Button.test.tsx
@@ -26,7 +26,11 @@ describe('Button', () => {
   })
 
   it('Renders an anchor tag when an href exists', () => {
-    render(<Button href="/home">Home</Button>)
+    render(
+      <Button tag="a" href="/home">
+        Home
+      </Button>
+    )
 
     expect(screen.getByRole('link')).toBeTruthy()
     expect(screen.getByRole('link')).toHaveAttribute('href', '/home')
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 0692d9d0..ee2c5ebb 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -1,8 +1,8 @@
-import React, { forwardRef, ReactNode } from 'react'
+import React, { forwardRef, ReactNode, ElementType } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import Loading from '../Loading';
+import Loading from '../Loading'
 import {
   IComponentBaseProps,
   ComponentColor,
@@ -10,12 +10,46 @@ import {
   ComponentSize,
 } from '../types'
 
-export type ButtonProps = Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'color'
-> &
+type ITagProps = {
+  a: {
+    attr: React.AnchorHTMLAttributes<HTMLAnchorElement>
+    ele: HTMLAnchorElement
+  }
+  button: {
+    attr: React.ButtonHTMLAttributes<HTMLButtonElement>
+    ele: HTMLButtonElement
+  }
+  div: {
+    attr: React.HTMLAttributes<HTMLDivElement>
+    ele: HTMLDivElement
+  }
+  img: {
+    attr: React.ImgHTMLAttributes<HTMLImageElement>
+    ele: HTMLImageElement
+  }
+  input: {
+    attr: React.InputHTMLAttributes<HTMLInputElement>
+    ele: HTMLInputElement
+  }
+  label: {
+    attr: React.LabelHTMLAttributes<HTMLLabelElement>
+    ele: HTMLLabelElement
+  }
+  span: {
+    attr: React.HTMLAttributes<HTMLSpanElement>
+    ele: HTMLSpanElement
+  }
+}
+
+type GetTagProps<T extends ElementType> = T extends keyof ITagProps
+  ? ITagProps[T]
+  : ITagProps['button']
+
+export type ButtonProps<
+  T extends ElementType = 'button',
+  A extends React.HTMLAttributes<HTMLElement> = GetTagProps<T>['attr']
+> = Omit<A, 'color' | 'size'> &
   IComponentBaseProps & {
-    href?: string
     shape?: ComponentShape
     size?: ComponentSize
     variant?: 'outline' | 'link'
@@ -25,17 +59,35 @@ export type ButtonProps = Omit<
     fullWidth?: boolean
     responsive?: boolean
     animation?: boolean
-    loading?: boolean 
+    loading?: boolean
     active?: boolean
     startIcon?: ReactNode
     endIcon?: ReactNode
+    disabled?: boolean
+    tag?: T
   }
-
+//  https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+const VoidElementList: ElementType[] = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'keygen',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
-      href,
       shape,
       size,
       variant,
@@ -53,10 +105,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       dataTheme,
       className,
       style,
+      tag = 'button',
       ...props
     },
     ref
   ): JSX.Element => {
+    const Tag = tag
     const classes = twMerge(
       'btn',
       className,
@@ -81,24 +135,26 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         glass: glass,
         'btn-wide': wide,
         'btn-block': fullWidth,
-        'btn-xs md:btn-sm lg:btn-md xl:btn-lg': responsive,
+        'btn-xs sm:btn-sm md:btn-md lg:btn-lg': responsive,
         'no-animation': !animation,
         'btn-active': active,
         'btn-disabled': disabled,
       })
     )
-
-    if (href) {
+    if (VoidElementList.includes(Tag)) {
       return (
-        <a className={classes} style={style} href={href}>
-          {startIcon && startIcon}
-          {children}
-          {endIcon && endIcon}
-        </a>
+        <Tag
+          {...props}
+          ref={ref}
+          data-theme={dataTheme}
+          className={classes}
+          style={style}
+          disabled={disabled}
+        />
       )
     } else {
       return (
-        <button
+        <Tag
           {...props}
           ref={ref}
           data-theme={dataTheme}
@@ -106,11 +162,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           style={style}
           disabled={disabled}
         >
-          {!startIcon && loading && (<Loading size={size} />)}
+          {!startIcon && loading && <Loading size={size} />}
           {startIcon && !loading && startIcon}
           {children}
           {endIcon && endIcon}
-        </button>
+        </Tag>
       )
     }
   }
@@ -118,4 +174,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
 Button.displayName = 'Button'
 
-export default Button
+export default Button as <
+  T extends ElementType = 'button',
+  E extends HTMLElement = GetTagProps<T>['ele'],
+  A extends React.HTMLAttributes<HTMLElement> = GetTagProps<T>['attr']
+>(
+  props: ButtonProps<T, A> & { ref?: React.Ref<E> }
+) => JSX.Element
diff --git a/src/Button/index.tsx b/src/Button/index.tsx
index 6af1fe4a..897b29f9 100644
--- a/src/Button/index.tsx
+++ b/src/Button/index.tsx
@@ -1,3 +1,3 @@
-import Button, { ButtonProps as TButtonProps } from './Button'
-export type ButtonProps = TButtonProps
+import Button from './Button'
+export type { ButtonProps } from './Button'
 export default Button
diff --git a/src/Collapse/Collapse.stories.tsx b/src/Collapse/Collapse.stories.tsx
index c6e48258..20692786 100644
--- a/src/Collapse/Collapse.stories.tsx
+++ b/src/Collapse/Collapse.stories.tsx
@@ -6,6 +6,9 @@ import Collapse, { CollapseProps } from '.'
 export default {
   title: 'Data Display/Collapse',
   component: Collapse,
+  args: {
+    className: 'bg-base-200',
+  },
 } as Meta
 
 const Template: Story<CollapseProps> = (args) => {
@@ -24,15 +27,13 @@ const Template: Story<CollapseProps> = (args) => {
 export const Default = Template.bind({})
 Default.args = {}
 
-export const Checkbox = (args) => {
+export const Checkbox: Story<CollapseProps> = (args) => {
   return (
     <Collapse {...args}>
       <Collapse.Title className="text-xl font-medium">
         Click me to show/hide content
       </Collapse.Title>
-      <Collapse.Content>
-        hello
-      </Collapse.Content>
+      <Collapse.Content>hello</Collapse.Content>
     </Collapse>
   )
 }
@@ -42,22 +43,22 @@ Checkbox.args = {
 
 export const WithBorderAndBackground = Template.bind({})
 WithBorderAndBackground.args = {
-  className: 'border border-base-300 bg-base-100 rounded-box',
+  className: 'border border-base-300 bg-base-200',
 }
 
 export const WithArrow = Template.bind({})
 WithArrow.args = {
-  className: 'border border-base-300 bg-base-100 rounded-box',
+  className: 'border border-base-300 bg-base-200',
   icon: 'arrow',
 }
 
 export const WithPlusMinus = Template.bind({})
 WithPlusMinus.args = {
-  className: 'border border-base-300 bg-base-100 rounded-box',
+  className: 'border border-base-300 bg-base-200',
   icon: 'plus',
 }
 
-export const ForceOpen = (args) => {
+export const ForceOpen: Story<CollapseProps> = (args) => {
   return (
     <Collapse {...args}>
       <Collapse.Title className="text-xl font-medium">
@@ -70,11 +71,11 @@ export const ForceOpen = (args) => {
   )
 }
 ForceOpen.args = {
-  className: 'border border-base-300 bg-base-100 rounded-box',
+  className: 'border border-base-300 bg-base-200',
   open: true,
 }
 
-export const ForceClose = (args) => {
+export const ForceClose: Story<CollapseProps> = (args) => {
   return (
     <Collapse {...args}>
       <Collapse.Title className="text-xl font-medium">
@@ -87,7 +88,7 @@ export const ForceClose = (args) => {
   )
 }
 ForceClose.args = {
-  className: 'border border-base-300 bg-base-100 rounded-box',
+  className: 'border border-base-300 bg-base-200',
   open: false,
 }
 
diff --git a/src/Collapse/Collapse.tsx b/src/Collapse/Collapse.tsx
index da7e0cdf..ff344fe5 100644
--- a/src/Collapse/Collapse.tsx
+++ b/src/Collapse/Collapse.tsx
@@ -4,18 +4,36 @@ import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps } from '../types'
 
+import CollapseDetails from './CollapseDetails'
 import CollapseTitle from './CollapseTitle'
 import CollapseContent from './CollapseContent'
 
-export type CollapseProps = React.HTMLAttributes<HTMLDivElement> &
-  IComponentBaseProps & {
-    checkbox?: boolean
-    icon?: 'arrow' | 'plus'
-    open?: boolean
-    onOpen?: () => void
-    onClose?: () => void
-    onToggle?: () => void
-  }
+export type CollapseProps<T extends HTMLElement = HTMLDivElement> =
+  React.HTMLAttributes<T> &
+    IComponentBaseProps & {
+      checkbox?: boolean
+      icon?: 'arrow' | 'plus'
+      open?: boolean
+      onOpen?: () => void
+      onClose?: () => void
+      onToggle?: () => void
+    }
+
+export const classesFn = ({
+  className,
+  icon,
+  open,
+}: Pick<CollapseProps, 'className' | 'icon' | 'open'>) =>
+  twMerge(
+    'collapse',
+    className,
+    clsx({
+      'collapse-arrow': icon === 'arrow',
+      'collapse-plus': icon === 'plus',
+      'collapse-open': open === true,
+      'collapse-close': open === false,
+    })
+  )
 
 const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
   (
@@ -33,17 +51,6 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
     },
     ref
   ): JSX.Element => {
-    const classes = twMerge(
-      'collapse',
-      className,
-      clsx({
-        'collapse-arrow': icon === 'arrow',
-        'collapse-plus': icon === 'plus',
-        'collapse-open': open === true,
-        'collapse-close': open === false,
-      })
-    )
-
     const [isChecked, setIsChecked] = useState(open)
     const checkboxRef = useRef<HTMLInputElement>(null)
 
@@ -57,7 +64,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
       } else if (onClose && !checkboxRef.current?.checked) {
         onClose()
       }
-      
+
       setIsChecked(checkboxRef.current?.checked)
     }
 
@@ -82,7 +89,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
         ref={ref}
         tabIndex={isChecked === true ? undefined : 0}
         data-theme={dataTheme}
-        className={classes}
+        className={classesFn({ className, icon, open })}
         onBlur={handleBlur}
         onFocus={handleFocus}
       >
@@ -102,6 +109,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
 )
 
 export default Object.assign(Collapse, {
+  Details: CollapseDetails,
   Title: CollapseTitle,
   Content: CollapseContent,
 })
diff --git a/src/Collapse/CollapseDetails.stories.tsx b/src/Collapse/CollapseDetails.stories.tsx
new file mode 100644
index 00000000..c3070aee
--- /dev/null
+++ b/src/Collapse/CollapseDetails.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { StoryFn as Story, Meta } from '@storybook/react'
+
+import Collapse, { DetailsProps } from '.'
+
+export default {
+  title: 'Data Display/Collapse/Details',
+  component: Collapse.Details,
+} as Meta
+
+export const Default: Story<DetailsProps> = (args) => {
+  return (
+    <Collapse.Details {...args}>
+      <Collapse.Details.Title className="text-xl font-medium">
+        Click to open/close
+      </Collapse.Details.Title>
+      <Collapse.Content>
+        <p>content</p>
+      </Collapse.Content>
+    </Collapse.Details>
+  )
+}
+Default.args = {
+  className: 'bg-base-200',
+}
diff --git a/src/Collapse/CollapseDetails.tsx b/src/Collapse/CollapseDetails.tsx
new file mode 100644
index 00000000..dd591d62
--- /dev/null
+++ b/src/Collapse/CollapseDetails.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { classesFn, CollapseProps } from './Collapse'
+import { Summary } from './CollapseTitle'
+
+export type DetailsProps = Omit<
+  CollapseProps<HTMLDetailsElement>,
+  'checkbox' | 'onOpen' | 'onClose' | 'onToggle'
+>
+const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
+  (
+    { children, icon, open, dataTheme, className, ...props },
+    ref
+  ): JSX.Element => {
+    return (
+      <details
+        {...props}
+        ref={ref}
+        data-theme={dataTheme}
+        className={classesFn({ className, icon, open })}
+        open={open}
+      >
+        {children}
+      </details>
+    )
+  }
+)
+
+Details.displayName = 'Details'
+export default Object.assign(Details, { Title: Summary })
diff --git a/src/Collapse/CollapseTitle.tsx b/src/Collapse/CollapseTitle.tsx
index 6ba78771..4f395145 100644
--- a/src/Collapse/CollapseTitle.tsx
+++ b/src/Collapse/CollapseTitle.tsx
@@ -3,21 +3,33 @@ import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps } from '../types'
 
-export type CollapseTitleProps = React.HTMLAttributes<HTMLDivElement> &
-  IComponentBaseProps
+export type CollapseTitleProps<T extends HTMLElement = HTMLDivElement> =
+  React.HTMLAttributes<T> & IComponentBaseProps
+
+const classesFn = ({ className }: Pick<CollapseTitleProps, 'className'>) =>
+  twMerge('collapse-title', className)
 
 const CollapseTitle = ({
   children,
   className,
   ...props
 }: CollapseTitleProps): JSX.Element => {
-  const classes = twMerge('collapse-title', className)
-
   return (
-    <div {...props} className={classes}>
+    <div {...props} className={classesFn({ className })}>
       {children}
     </div>
   )
 }
 
+export type SummaryProps = CollapseTitleProps<HTMLElement>
+export const Summary = React.forwardRef<HTMLElement, SummaryProps>(
+  ({ children, className }, ref): JSX.Element => {
+    return (
+      <summary ref={ref} className={classesFn({ className })}>
+        {children}
+      </summary>
+    )
+  }
+)
+
 export default CollapseTitle
diff --git a/src/Collapse/index.tsx b/src/Collapse/index.tsx
index cbe59409..15bb239b 100644
--- a/src/Collapse/index.tsx
+++ b/src/Collapse/index.tsx
@@ -1,3 +1,5 @@
 import Collapse, { CollapseProps as TCollapseProps } from './Collapse'
+
+export type { DetailsProps } from './CollapseDetails'
 export type CollapseProps = TCollapseProps
 export default Collapse
diff --git a/src/Dropdown/Dropdown.stories.tsx b/src/Dropdown/Dropdown.stories.tsx
index ad65366e..f226064e 100644
--- a/src/Dropdown/Dropdown.stories.tsx
+++ b/src/Dropdown/Dropdown.stories.tsx
@@ -48,8 +48,11 @@ export const AsCard: Story<DropdownProps> = (args) => {
 
 export const InNavbar: Story<DropdownProps> = ({ dataTheme, ...args }) => {
   return (
-    <Navbar className="my-32 px-2 font-sans" color="dark" dataTheme={dataTheme}>
-      <Navbar.Start>
+    <Navbar
+      className="my-32 px-2 font-sans bg-base-300 rounded-box"
+      dataTheme={dataTheme}
+    >
+      <Navbar.Start className="px-2 lg:flex-none">
         <span className="text-lg font-bold">daisyUI</span>
       </Navbar.Start>
       <Navbar.End>
@@ -57,8 +60,10 @@ export const InNavbar: Story<DropdownProps> = ({ dataTheme, ...args }) => {
           Button
         </Button>
         <Dropdown {...args} dataTheme={dataTheme}>
-          <Dropdown.Toggle color="ghost">Dropdown</Dropdown.Toggle>
-          <Dropdown.Menu className="w-52">
+          <Dropdown.Toggle className="btn btn-ghost rounded-btn" button={false}>
+            Dropdown
+          </Dropdown.Toggle>
+          <Dropdown.Menu className="w-52 mt-4">
             <Dropdown.Item>Item 1</Dropdown.Item>
             <Dropdown.Item>Item 2</Dropdown.Item>
           </Dropdown.Menu>
@@ -67,13 +72,19 @@ export const InNavbar: Story<DropdownProps> = ({ dataTheme, ...args }) => {
     </Navbar>
   )
 }
+InNavbar.args = {
+  end: true,
+}
 
 export const Helper: Story<DropdownProps> = (args) => {
   return (
     <div className="my-32 font-sans">
       A normal text and a helper dropdown
       <Dropdown {...args}>
-        <Button shape="circle" className="text-info" color="ghost" size="xs">
+        <Dropdown.Toggle
+          button={false}
+          className="btn btn-circle btn-ghost btn-xs text-info"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -87,7 +98,7 @@ export const Helper: Story<DropdownProps> = (args) => {
               d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
             ></path>
           </svg>
-        </Button>
+        </Dropdown.Toggle>
         <Dropdown.Menu className="card compact w-64 !p-0 shadow bg-base-100 rounded-box">
           <Card.Body>
             <Card.Title tag={'h2'}>You needed more info?</Card.Title>
@@ -98,3 +109,4 @@ export const Helper: Story<DropdownProps> = (args) => {
     </div>
   )
 }
+Helper.args = { end: true }
diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx
index cb04484c..41f4c6dc 100644
--- a/src/Dropdown/Dropdown.tsx
+++ b/src/Dropdown/Dropdown.tsx
@@ -4,55 +4,93 @@ import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps } from '../types'
 
+import DropdownDetails from './DropdownDetails'
 import DropdownMenu from './DropdownMenu'
 import DropdownItem from './DropdownItem'
 import DropdownToggle from './DropdownToggle'
 
-export type DropdownProps = React.HTMLAttributes<HTMLDivElement> &
-  IComponentBaseProps & {
-    item?: ReactNode
-    horizontal?: 'left' | 'right'
-    vertical?: 'top' | 'bottom'
-    end?: boolean
-    hover?: boolean
-    open?: boolean
-  }
+export type DropdownProps<T extends HTMLElement = HTMLDivElement> =
+  React.HTMLAttributes<T> &
+    IComponentBaseProps & {
+      item?: ReactNode
+      horizontal?: 'left' | 'right'
+      vertical?: 'top' | 'bottom'
+      end?: boolean
+      hover?: boolean
+      open?: boolean
+    }
+
+export const classesFn = ({
+  className,
+  horizontal,
+  vertical,
+  end,
+  hover,
+  open,
+}: Pick<
+  DropdownProps,
+  'className' | 'horizontal' | 'vertical' | 'end' | 'hover' | 'open'
+>) =>
+  twMerge(
+    'dropdown',
+    className,
+    clsx({
+      'dropdown-left': horizontal === 'left',
+      'dropdown-right': horizontal === 'right',
+      'dropdown-top': vertical === 'top',
+      'dropdown-bottom': vertical === 'bottom',
+      'dropdown-end': end,
+      'dropdown-hover': hover,
+      'dropdown-open': open,
+    })
+  )
 
 const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
   (
-    { children, className, item, horizontal, vertical, end, hover, open, dataTheme, ...props },
+    {
+      children,
+      className,
+      item,
+      horizontal,
+      vertical,
+      end,
+      hover,
+      open,
+      dataTheme,
+      ...props
+    },
     ref
   ): JSX.Element => {
-    const classes = twMerge(
-      'dropdown',
-      className,
-      clsx({
-        'dropdown-left': horizontal === 'left',
-        'dropdown-right': horizontal === 'right',
-        'dropdown-top': vertical === 'top',
-        'dropdown-bottom': vertical === 'bottom',
-        'dropdown-end': end,
-        'dropdown-hover': hover,
-        'dropdown-open': open,
-      })
-    )
-
     return (
       <div
         role="listbox"
         {...props}
         ref={ref}
         data-theme={dataTheme}
-        className={classes}
+        className={classesFn({
+          className,
+          horizontal,
+          vertical,
+          end,
+          hover,
+          open,
+        })}
       >
-        <label tabIndex={0}>{children}</label>
-        <ul className="dropdown-content">{item}</ul>
+        {item ? (
+          <>
+            <label tabIndex={0}>{children}</label>
+            <ul className="dropdown-content">{item}</ul>
+          </>
+        ) : (
+          <>{children}</>
+        )}
       </div>
     )
   }
 )
 
 export default Object.assign(Dropdown, {
+  Details: DropdownDetails,
   Toggle: DropdownToggle,
   Menu: DropdownMenu,
   Item: DropdownItem,
diff --git a/src/Dropdown/DropdownDetails.stories.tsx b/src/Dropdown/DropdownDetails.stories.tsx
new file mode 100644
index 00000000..007f0d8a
--- /dev/null
+++ b/src/Dropdown/DropdownDetails.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { StoryFn as Story, Meta } from '@storybook/react'
+
+import Dropdown, { DetailsProps } from '.'
+
+export default {
+  title: 'Actions/Dropdown/Details',
+  component: Dropdown.Details,
+} as Meta
+
+export const Default: Story<DetailsProps> = (args) => {
+  return (
+    <div className="my-32">
+      <Dropdown.Details {...args}>
+        <Dropdown.Details.Toggle>Click</Dropdown.Details.Toggle>
+        <Dropdown.Menu className="w-52">
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown.Details>
+    </div>
+  )
+}
+Default.args = {}
diff --git a/src/Dropdown/DropdownDetails.tsx b/src/Dropdown/DropdownDetails.tsx
new file mode 100644
index 00000000..4b9b4ae5
--- /dev/null
+++ b/src/Dropdown/DropdownDetails.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { classesFn, DropdownProps } from './Dropdown'
+import DropdownMenu from './DropdownMenu'
+import DropdownItem from './DropdownItem'
+import { Summary } from './DropdownToggle'
+
+export type DetailsProps = Omit<
+  DropdownProps<HTMLDetailsElement>,
+  'item' | 'hover'
+>
+const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
+  (
+    {
+      children,
+      className,
+      horizontal,
+      vertical,
+      end,
+      dataTheme,
+      open,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    return (
+      <details
+        role="listbox"
+        {...props}
+        ref={ref}
+        data-theme={dataTheme}
+        className={classesFn({
+          className,
+          horizontal,
+          vertical,
+          open,
+          end,
+        })}
+        open={open}
+      >
+        {children}
+      </details>
+    )
+  }
+)
+
+Details.displayName = 'Details'
+export default Object.assign(Details, {
+  Toggle: Summary,
+})
diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx
index 62f637ac..abbef514 100644
--- a/src/Dropdown/DropdownToggle.tsx
+++ b/src/Dropdown/DropdownToggle.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import { ComponentColor, ComponentSize, IComponentBaseProps } from '../types'
 
-import Button from '../Button'
+import Button, { ButtonProps } from '../Button'
 
 export type DropdownToggleProps = Omit<
   React.LabelHTMLAttributes<HTMLLabelElement>,
@@ -29,7 +29,7 @@ const DropdownToggle = ({
     <label tabIndex={0} className={className} {...props}>
       {button ? (
         <Button
-          type='button'
+          type="button"
           dataTheme={dataTheme}
           color={color}
           size={size}
@@ -44,4 +44,11 @@ const DropdownToggle = ({
   )
 }
 
+export type SummaryProps = Omit<ButtonProps, 'tag'>
+export const Summary = forwardRef<HTMLElement, SummaryProps>(
+  (props, ref): JSX.Element => {
+    return <Button {...props} ref={ref} tag="summary" />
+  }
+)
+
 export default DropdownToggle
diff --git a/src/Dropdown/index.tsx b/src/Dropdown/index.tsx
index 08b0fea6..ac7e8d1a 100644
--- a/src/Dropdown/index.tsx
+++ b/src/Dropdown/index.tsx
@@ -1,3 +1,5 @@
 import Dropdown, { DropdownProps as TDropdownProps } from './Dropdown'
+
+export type { DetailsProps } from './DropdownDetails'
 export type DropdownProps = TDropdownProps
 export default Dropdown