+ ),
+ ],
+}
+
+export default meta
+
+type Story = StoryObj
+
+const mockOptions = [
+ {
+ title: "Let's talk",
+ description: "Contact a specialist by phone.",
+ href: "#",
+ target: "_blank",
+ },
+ {
+ title: "Drop us a line",
+ description: "Send a support request form to our help team.",
+ href: "#",
+ target: "_blank",
+ },
+ {
+ title: "Help Center",
+ href: "#",
+ target: "_blank",
+ },
+]
+
+export const Default: Story = {
+ args: {
+ label: "Help",
+ options: mockOptions,
+ hasNewUpdate: false,
+ },
+}
+
+export const WithNewUpdate: Story = {
+ args: {
+ label: "Help",
+ options: mockOptions,
+ hasNewUpdate: true,
+ },
+}
diff --git a/lib/experimental/Navigation/Omnibutton/index.tsx b/lib/experimental/Navigation/Omnibutton/index.tsx
new file mode 100644
index 000000000..1649a2d52
--- /dev/null
+++ b/lib/experimental/Navigation/Omnibutton/index.tsx
@@ -0,0 +1,58 @@
+import { Icon } from "@/components/Utilities/Icon"
+import { Dropdown, DropdownItem } from "@/experimental/Navigation/Dropdown"
+import { Question } from "@/icons/app"
+import { cn, focusRing } from "@/lib/utils"
+
+interface Option {
+ title: string
+ description?: string
+ href?: string
+ onClick?: () => void
+ icon?: string
+ target?: string
+}
+
+interface OmniButtonProps {
+ label: string
+ options: Option[]
+ hasNewUpdate?: boolean
+}
+
+// Function to format the options that comes from Factorial for the dropdown
+function formatDropdownItems(options: Option[]): DropdownItem[] {
+ return options
+ .filter((option) => !!option.title)
+ .map(({ title, description, href, onClick, target: _ }) => ({
+ label: title,
+ description,
+ href,
+ onClick,
+ }))
+}
+
+export function OmniButton({ label, options, hasNewUpdate }: OmniButtonProps) {
+ return (
+
+
+
+
+
+ )
+}
diff --git a/lib/icons/app/Question.tsx b/lib/icons/app/Question.tsx
new file mode 100644
index 000000000..596970958
--- /dev/null
+++ b/lib/icons/app/Question.tsx
@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+import { Ref, forwardRef } from "react";
+const SvgQuestion = (props: SVGProps, ref: Ref) => ;
+const ForwardRef = forwardRef(SvgQuestion);
+export default ForwardRef;
\ No newline at end of file
diff --git a/lib/icons/app/index.ts b/lib/icons/app/index.ts
index 07092046e..a4a7d6b42 100644
--- a/lib/icons/app/index.ts
+++ b/lib/icons/app/index.ts
@@ -77,6 +77,7 @@ export { default as Person } from './Person'
export { default as Pin } from './Pin'
export { default as PixBrazil } from './PixBrazil'
export { default as Placeholder } from './Placeholder'
+export { default as Question } from './Question'
export { default as Reaction } from './Reaction'
export { default as Receipt } from './Receipt'
export { default as Rocket } from './Rocket'