diff --git a/.changeset/cyan-chicken-juggle.md b/.changeset/cyan-chicken-juggle.md
new file mode 100644
index 0000000000..1d44db90f5
--- /dev/null
+++ b/.changeset/cyan-chicken-juggle.md
@@ -0,0 +1,15 @@
+---
+"@comet/cms-admin": minor
+---
+
+Add `buttonChildren` and `children` props to `UserHeaderItem`
+
+This increases the flexibility of the `UserHeaderItem` component by allowing the `AppHeaderDropdown` label to be passed via `buttonChildren`. More buttons or other list items in the dropdown can be passed via `children`.
+
+**Example:**
+```tsx
+
+
+
+
+```
\ No newline at end of file
diff --git a/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx b/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx
index 4316bb9bb6..b15db11bae 100644
--- a/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx
+++ b/packages/admin/cms-admin/src/common/header/UserHeaderItem.tsx
@@ -1,10 +1,12 @@
-import { AppHeaderDropdown, Loading } from "@comet/admin";
+import { gql, useMutation } from "@apollo/client";
+import { AppHeaderDropdown, AppHeaderDropdownProps, Loading } from "@comet/admin";
import { Account, Info, Logout } from "@comet/admin-icons";
import { Box, Button as MUIButton } from "@mui/material";
import { styled } from "@mui/material/styles";
import React from "react";
import { FormattedMessage } from "react-intl";
+import { useCurrentUser } from "../../userPermissions/hooks/currentUser";
import { AboutModal } from "./about/AboutModal";
import { GQLSignOutMutation } from "./UserHeaderItem.generated";
@@ -24,10 +26,6 @@ const Separator = styled(Box)`
margin-bottom: 20px;
`;
-import { gql, useMutation } from "@apollo/client";
-
-import { useCurrentUser } from "../../userPermissions/hooks/currentUser";
-
const signOutMutation = gql`
mutation SignOut {
currentUserSignOut
@@ -36,17 +34,19 @@ const signOutMutation = gql`
interface UserHeaderItemProps {
aboutModalLogo?: React.ReactElement;
+ buttonChildren?: AppHeaderDropdownProps["buttonChildren"];
+ children?: React.ReactNode;
}
export function UserHeaderItem(props: UserHeaderItemProps): React.ReactElement {
- const { aboutModalLogo } = props;
+ const { aboutModalLogo, buttonChildren, children } = props;
const user = useCurrentUser();
const [showAboutModal, setShowAboutModal] = React.useState(false);
const [signOut, { loading: isSigningOut }] = useMutation(signOutMutation);
return (
- }>
+ }>
+ {children}
{isSigningOut ? (