diff --git a/packages/react-core/src/components/DataList/DataListToggle.tsx b/packages/react-core/src/components/DataList/DataListToggle.tsx
index 8483126bfd7..65e7403d439 100644
--- a/packages/react-core/src/components/DataList/DataListToggle.tsx
+++ b/packages/react-core/src/components/DataList/DataListToggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonProps, ButtonVariant } from '../Button';
 
 export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the DataList cell */
@@ -19,6 +19,8 @@ export interface DataListToggleProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
   /** Allows users of some screen readers to shift focus to the controlled element. Should be used when the controlled contents are not adjacent to the toggle that controls them. */
   'aria-controls'?: string;
+  /** Additional properties spread to the toggle button */
+  buttonProps?: ButtonProps;
 }
 
 export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
@@ -28,6 +30,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
   'aria-label': ariaLabel = 'Details',
   rowid = '',
   id,
+  buttonProps,
   ...props
 }: DataListToggleProps) => (
   <div className={css(styles.dataListItemControl, className)} {...props}>
@@ -39,6 +42,7 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
         aria-label={ariaLabel}
         aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
         aria-expanded={isExpanded}
+        {...buttonProps}
       >
         <div className={css(styles.dataListToggleIcon)}>
           <AngleRightIcon />
diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md
index eac2790902c..f5cce7548c0 100644
--- a/packages/react-core/src/components/DataList/examples/DataList.md
+++ b/packages/react-core/src/components/DataList/examples/DataList.md
@@ -51,6 +51,11 @@ import { css } from '@patternfly/react-styles';
 ```ts file="./DataListExpandable.tsx"
 ```
 
+### Mixed expandable
+
+```ts file="./DataListMixedExpandable.tsx"
+```
+
 ### Width modifiers
 
 ```ts file="./DataListWidthModifiers.tsx"
diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
new file mode 100644
index 00000000000..eb8989f3119
--- /dev/null
+++ b/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
@@ -0,0 +1,234 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListItemRow,
+  DataListCell,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  Dropdown,
+  DropdownItem,
+  DropdownPosition,
+  KebabToggle
+} from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+
+export const DataListMixedExpandable: React.FunctionComponent = () => {
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  const [isOpen3, setIsOpen3] = React.useState(false);
+  const [expanded, setExpanded] = React.useState(['m-ex-toggle1', 'm-ex-toggle3']);
+
+  const onToggle1 = isOpen1 => {
+    setIsOpen1(isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = isOpen2 => {
+    setIsOpen2(isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onToggle3 = isOpen3 => {
+    setIsOpen3(isOpen3);
+  };
+
+  const onSelect3 = () => {
+    setIsOpen3(!isOpen3);
+  };
+
+  const toggle = id => {
+    const index = expanded.indexOf(id);
+    const newExpanded =
+      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
+    setExpanded(newExpanded);
+  };
+
+  return (
+    <React.Fragment>
+      <DataList aria-label="Mixed expandable data list example">
+        <DataListItem aria-labelledby="m-ex-item1" isExpanded={expanded.includes('m-ex-toggle1')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('m-ex-toggle1')}
+              isExpanded={expanded.includes('m-ex-toggle1')}
+              id="m-ex-toggle1"
+              aria-controls="m-ex-expand1"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="primary content">
+                  <div id="m-ex-item1">Primary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                  <a href="#">link</a>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item1 m-ex-action1"
+              id="m-ex-action1"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen1}
+                onSelect={onSelect1}
+                toggle={<KebabToggle onToggle={onToggle1} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="First expandable content details"
+            id="m-ex-expand1"
+            isHidden={!expanded.includes('m-ex-toggle1')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+        <DataListItem aria-labelledby="m-ex-item2">
+          <DataListItemRow>
+            <DataListToggle
+              id="m-ex-toggle2"
+              buttonProps={{
+                disabled: true,
+                'aria-hidden': 'true',
+                style: { visibility: 'hidden' }
+              }}
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <div id="m-ex-item2">Secondary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content3">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item2 mex-action2"
+              id="m-ex-action2"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen2}
+                onSelect={onSelect2}
+                toggle={<KebabToggle onToggle={onToggle2} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+        </DataListItem>
+        <DataListItem aria-labelledby="m-ex-item3" isExpanded={expanded.includes('m-ex-toggle3')}>
+          <DataListItemRow>
+            <DataListToggle
+              onClick={() => toggle('m-ex-toggle3')}
+              isExpanded={expanded.includes('m-ex-toggle3')}
+              id="m-ex-toggle3"
+              aria-controls="m-ex-expand3"
+            />
+            <DataListItemCells
+              dataListCells={[
+                <DataListCell isIcon key="icon">
+                  <CodeBranchIcon />
+                </DataListCell>,
+                <DataListCell key="tertiary content">
+                  <div id="m-ex-item3">Tertiary content</div>
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content">
+                  <span>Lorem ipsum dolor sit amet.</span>
+                </DataListCell>,
+                <DataListCell key="secondary content 2">
+                  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
+                </DataListCell>
+              ]}
+            />
+            <DataListAction
+              aria-labelledby="m-ex-item3 m-ex-action3"
+              id="m-ex-action3"
+              aria-label="Actions"
+              isPlainButtonAction
+            >
+              <Dropdown
+                isPlain
+                position={DropdownPosition.right}
+                isOpen={isOpen3}
+                onSelect={onSelect3}
+                toggle={<KebabToggle onToggle={onToggle3} />}
+                dropdownItems={[
+                  <DropdownItem key="link">Link</DropdownItem>,
+                  <DropdownItem key="action" component="button">
+                    Action
+                  </DropdownItem>,
+                  <DropdownItem key="disabled link" isDisabled>
+                    Disabled Link
+                  </DropdownItem>
+                ]}
+              />
+            </DataListAction>
+          </DataListItemRow>
+          <DataListContent
+            aria-label="Third expandable content details"
+            id="m-ex-expand3"
+            isHidden={!expanded.includes('m-ex-toggle3')}
+          >
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua.
+            </p>
+          </DataListContent>
+        </DataListItem>
+      </DataList>
+    </React.Fragment>
+  );
+};