nodejs · ovflowd · Jul 9, 2025 · Jul 8, 2025 · Jul 8, 2025 · Jul 8, 2025
@@ -6,6 +6,22 @@ import FormattedTime from '#site/components/Common/FormattedTime';
 import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
 import getReleaseData from '#site/next-data/releaseData';
 
+const BADGE_KIND_MAP = {
+  'End-of-life': 'warning',
+  Maintenance: 'neutral',
+  LTS: 'info',
+  Current: 'default',
+  Pending: 'default',
+} as const;
+
+const BADGE_TEXT_MAP = {
+  'End-of-life': 'End-of-Life (EOL)',
+  Maintenance: 'Maintenance LTS',
+  LTS: 'Active LTS',
+  Current: 'Current',
+  Pending: 'Pending',
+} as const;
+
 const DownloadReleasesTable: FC = async () => {
   const releaseData = await getReleaseData();
 
@@ -35,11 +51,8 @@ const DownloadReleasesTable: FC = async () => {
               <FormattedTime date={release.releaseDate} />
             </td>
             <td data-label="Status">
-              <Badge
-                kind={release.status === 'End-of-life' ? 'warning' : 'default'}
-                size="small"
-              >
-                {release.status}
+              <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
+                {BADGE_TEXT_MAP[release.status]}
               </Badge>
             </td>
             <td className="download-table-last">

@@ -34,34 +34,38 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
   return (
     <Modal open={isOpen} onOpenChange={closeModal}>
       {release.status === 'End-of-life' && (
-        <AlertBox
-          title={t('components.common.alertBox.warning')}
-          level="warning"
-          size="small"
-        >
-          {t.rich('components.releaseModal.unsupportedVersionWarning', {
-            link: text => (
-              <Link
-                onClick={closeModal}
-                href="/about/previous-releases#release-schedule"
-              >
-                {text}
-              </Link>
-            ),
-          })}
-        </AlertBox>
+        <div className="mb-4">
+          <AlertBox
+            title={t('components.common.alertBox.warning')}
+            level="warning"
+            size="small"
+          >
+            {t.rich('components.releaseModal.unsupportedVersionWarning', {
+              link: text => (
+                <Link
+                  onClick={closeModal}
+                  href="/about/previous-releases#release-schedule"
+                >
+                  {text}
+                </Link>
+              ),
+            })}
+          </AlertBox>
+        </div>
       )}
 
       {release.status === 'LTS' && (
-        <AlertBox
-          title={t('components.common.alertBox.info')}
-          level="info"
-          size="small"
-        >
-          {t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
-            link: text => <Link href="/download/current">{text}</Link>,
-          })}
-        </AlertBox>
+        <div className="mb-4">
+          <AlertBox
+            title={t('components.common.alertBox.info')}
+            level="info"
+            size="small"
+          >
+            {t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
+              link: text => <Link href="/download/current">{text}</Link>,
+            })}
+          </AlertBox>
+        </div>
       )}
 
       <Title>{modalHeading}</Title>
@@ -73,8 +77,6 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
           </LinkWithArrow>
         )}
 
-        <h5>{t('components.releaseModal.overview')}</h5>
-
         <ReleaseOverview release={release} />
 
         <h5>{t('components.releaseModal.minorVersions')}</h5>

@@ -1,5 +1,7 @@
 'use strict';
 
+import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
+
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
 import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
 import WithBadgeGroup from './components/withBadgeGroup';
@@ -19,6 +21,8 @@ export const mdxComponents = {
   WithBanner,
   // HOC for providing Badge Data
   WithBadgeGroup,
+  // Standalone Badge Group
+  BadgeGroup,
   // Renders an container for Upcoming Node.js Meetings
   UpcomingMeetings,
 };
@@ -17,15 +17,33 @@ layout: home
   <div className="flex gap-4">
 
     <div className="flex flex-col gap-2">
-      <Button kind="special" className="!hidden dark:!block" href="/download">Install Node.js</Button>
+      <Button kind="special" className="!hidden dark:!block" href="/download">Get Node.js®</Button>
 
-      <Button kind="primary" className="!block dark:!hidden" href="/download">Install Node.js</Button>
+      <Button kind="primary" className="!block dark:!hidden" href="/download">Get Node.js®</Button>
 
       <Button kind="secondary" className="!block" href="/blog/announcements/node-18-eol-support">
         <span>Get security support</span>
         <br />
         <small className="!text-xs">for Node.js 18 and below</small>
       </Button>
+
+      <div className="flex flex-col xs:flex-row gap-2 justify-center xs:mt-6">
+        <WithNodeRelease status="LTS">
+          {({ release }) =>
+            <BadgeGroup size="small" kind="info" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
+              Node.js LTS
+            </BadgeGroup>}
+        </WithNodeRelease>
+
+        <WithNodeRelease status="Current">
+          {({ release }) =>
+            <BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
+              Node.js Current
+            </BadgeGroup>}
+        </WithNodeRelease>
+      </div>
+
+      <span className="italic text-center text-xs! text-neutral-800 dark:text-neutral-600">"LTS" refers to the long-term support version of Node.js. <Link href="/about/previous-releases">Learn more about Node.js releases.</Link></span>
     </div>
 
   </div>

@@ -74,6 +74,14 @@
     }
   }
 
+  &.neutral {
+    @apply bg-neutral-600;
+
+    .title {
+      @apply bg-neutral-700;
+    }
+  }
+
   code {
     /* Ignore the styles from `markdown.css` */
     all: unset;

@@ -52,6 +52,16 @@ export const Danger: Story = {
   },
 };
 
+export const Neutral: Story = {
+  args: {
+    level: 'neutral',
+    title: 'Note',
+    children:
+      "This is a neutral informational message that doesn't fit into the other alert categories.",
+    size: 'default',
+  },
+};
+
 export const InMarkdown: Story = {
   args: {
     level: 'danger',

@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
 import styles from './index.module.css';
 
 type AlertBoxProps = PropsWithChildren<{
-  level: 'info' | 'success' | 'warning' | 'danger';
+  level: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
   title: string;
   size?: 'default' | 'small';
 }>;

@@ -35,4 +35,16 @@
       bg-warning-600
       dark:border-warning-600;
   }
+
+  &.info {
+    @apply border-info-200
+      bg-info-600
+      dark:border-info-800;
+  }
+
+  &.neutral {
+    @apply border-neutral-200
+      bg-neutral-600
+      dark:border-neutral-800;
+  }
 }
@@ -23,6 +23,18 @@ export const Warning: Story = {
   },
 };
 
+export const Info: Story = {
+  args: {
+    kind: 'info',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    kind: 'neutral',
+  },
+};
+
 export const Small: Story = {
   args: {
     size: 'small',

@@ -3,10 +3,11 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
 
-type BadgeKind = 'default' | 'warning' | 'error';
+type BadgeKind = 'default' | 'warning' | 'error' | 'info' | 'neutral';
+type BadgeSize = 'small' | 'medium';
 
 type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
-  size?: 'small' | 'medium';
+  size?: BadgeSize;
   kind?: BadgeKind;
 };
 

@@ -1,8 +1,9 @@
 @reference "../../styles/index.css";
 
 .wrapper {
-  @apply flex
-    w-fit
+  @apply xs:w-fit
+    flex
+    w-full
     items-center
     rounded-full
     border
@@ -35,7 +36,8 @@
         dark:text-green-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-green-700
         dark:text-green-300;
     }
@@ -52,7 +54,8 @@
         dark:text-danger-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-danger-700
         dark:text-danger-300;
     }
@@ -69,9 +72,46 @@
         dark:text-warning-300;
     }
 
-    .message {
+    .message,
+    .message a:not(:hover) {
       @apply text-warning-700
         dark:text-warning-300;
     }
   }
+
+  &.info {
+    @apply border-info-200
+      bg-info-100
+      dark:border-info-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-info-500
+        dark:text-info-300;
+    }
+
+    .message,
+    .message a:not(:hover) {
+      @apply text-info-700
+        dark:text-info-300;
+    }
+  }
+
+  &.neutral {
+    @apply border-neutral-200
+      bg-neutral-100
+      dark:border-neutral-700
+      dark:bg-neutral-900;
+
+    .icon {
+      @apply text-neutral-500
+        dark:text-neutral-300;
+    }
+
+    .message,
+    .message a:not(:hover) {
+      @apply text-neutral-700
+        dark:text-neutral-300;
+    }
+  }
 }
@@ -14,6 +14,16 @@ export const Default: Story = {
   },
 };
 
+export const SmallDefault: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'default',
+    badgeText: 'New',
+    size: 'small',
+  },
+};
+
 export const Error: Story = {
   args: {
     href: '/',
@@ -32,4 +42,22 @@ export const Warning: Story = {
   },
 };
 
+export const Info: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'info',
+    badgeText: 'New',
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    href: '/',
+    children: 'OpenJS Foundation Certification 2023',
+    kind: 'neutral',
+    badgeText: 'New',
+  },
+};
+
 export default { component: BadgeGroup } as Meta;