feat(components): add tag prop to main disclosure button

abusix · Jun 19, 2024 · 0450d3f · 0450d3f
1 parent abfd389
commit 0450d3f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/components/navigation/navigation-disclosure.tsx b/src/components/navigation/navigation-disclosure.tsx
@@ -6,12 +6,14 @@ export interface NavigationDisclosureButtonProps {
     children: React.ReactNode;
     LeftIcon?: React.ElementType;
     onClick?: () => void;
+    tag?: string;
 }
 
 const NavigationDisclosureButton = ({
     children,
     LeftIcon,
     onClick,
+    tag,
 }: NavigationDisclosureButtonProps) => {
     return (
         <Disclosure.Button
@@ -20,6 +22,11 @@ const NavigationDisclosureButton = ({
         >
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
             {children}
+            {tag ? (
+                <span className="ml-auto rounded border border-neutral-0 px-1.5 text-xs font-semibold uppercase text-neutral-0">
+                    {tag}
+                </span>
+            ) : null}
         </Disclosure.Button>
     );
 };

diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
@@ -32,7 +32,9 @@ export const Default: Story = {
                         <Navigation.Group.Item>Lookup & Delist</Navigation.Group.Item>
                         <Navigation.Group.Item>Mail Intelligence</Navigation.Group.Item>
                         <Navigation.Disclosure>
-                            <Navigation.Disclosure.Button>AbuseHQ</Navigation.Disclosure.Button>
+                            <Navigation.Disclosure.Button tag="Beta">
+                                AbuseHQ 2
+                            </Navigation.Disclosure.Button>
                             <Navigation.Disclosure.Panel>
                                 <Navigation.Disclosure.Panel.Item>
                                     Cases