diff --git a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
index 09fab43d60..a650fc1491 100644
--- a/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
+++ b/packages/web-react/src/components/Dropdown/DropdownTrigger.tsx
@@ -1,21 +1,22 @@
 import classNames from 'classnames';
-import React, { ElementType } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { useStyleProps } from '../../hooks';
 import { StyleProps } from '../../types';
 import { useDropdownContext } from './DropdownContext';
 import { useDropdownAriaProps } from './useDropdownAriaProps';
 import { useDropdownStyleProps } from './useDropdownStyleProps';
 
-interface DropdownTriggerProps extends StyleProps {
-  elementType?: ElementType | string;
-  children: string | React.ReactNode | ((props: { isOpen: boolean }) => React.ReactNode);
-}
+type DropdownTriggerProps<E extends ElementType> = {
+  elementType?: E;
+  children: string | ReactNode | ((props: { isOpen: boolean }) => ReactNode);
+} & React.ComponentPropsWithRef<E> &
+  StyleProps;
 
 const defaultProps = {
   elementType: 'button',
 };
 
-export const DropdownTrigger = (props: DropdownTriggerProps) => {
+export const DropdownTrigger = <T extends ElementType = 'button'>(props: DropdownTriggerProps<T>) => {
   const propsWithDefaults = { ...defaultProps, ...props };
   const { elementType = 'button', children, ...rest } = propsWithDefaults;
   const { id, isOpen, onToggle, fullWidthMode, triggerRef } = useDropdownContext();
diff --git a/packages/web-react/src/components/Dropdown/demo/DropdownVariousItems.tsx b/packages/web-react/src/components/Dropdown/demo/DropdownVariousItems.tsx
index ba8c1db7fb..863b0b3b12 100644
--- a/packages/web-react/src/components/Dropdown/demo/DropdownVariousItems.tsx
+++ b/packages/web-react/src/components/Dropdown/demo/DropdownVariousItems.tsx
@@ -13,7 +13,9 @@ const DropdownVariousItems = () => {
 
   return (
     <Dropdown id="DropdownVariousItems" isOpen={isOpen} onToggle={onToggle}>
-      <DropdownTrigger elementType={Button}>Button as anchor</DropdownTrigger>
+      <DropdownTrigger elementType={Button} color="primary">
+        Button as anchor
+      </DropdownTrigger>
       <DropdownPopover>
         <Item elementType="a" href="#" label="Plain text" />
         <Item elementType="a" href="#" label="Item with icon" iconName="info" />
diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
index 82184ae326..def9acc0cc 100644
--- a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
+++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx
@@ -204,7 +204,6 @@ const ModalDefault = () => {
               provident unde. Eveniet, iste, molestiae?
             </p>
             <Dropdown id="dropdown-in-modal" isOpen={isDropdownOpen} onToggle={handleDropdownToggle}>
-              {/* @ts-expect-error -- TS2322: Property color does not exist on type … */}
               <DropdownTrigger elementType={Button} color="secondary">
                 Dropdown
               </DropdownTrigger>