semrush · ilyabrower · Aug 14, 2026 · Aug 20, 2026
diff --git a/semcore/side-panel/src/SidePanel.tsx b/semcore/side-panel/src/SidePanel.tsx
@@ -248,14 +248,10 @@ function Back(
   props: Intergalactic.InternalTypings.InferComponentProps<NSSidePanel.Back.Component>,
 ) {
   const SBack = Root;
-  const { Children, styles } = props;
+  const { styles } = props;
 
   return sstyled(styles)(
-    <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft}>
-      <ButtonLink.Text ellipsis>
-        <Children />
-      </ButtonLink.Text>
-    </SBack>,
+    <SBack render={ButtonLink} color='text-hint' size={100} addonLeft={ArrowLeft} />,
   );
 }
 
@@ -273,7 +269,7 @@ function Header(
   const SHeader = Root;
   const { Children, styles, title } = props;
   return sstyled(styles)(
-    <SHeader render={Box} tag='header'>
+    <SHeader render={Flex} tag='header'>
       {title && <SidePanel.Title children={title} />}
       <Children />
     </SHeader>,

diff --git a/semcore/side-panel/src/SidePanel.type.ts b/semcore/side-panel/src/SidePanel.type.ts
@@ -103,6 +103,9 @@ declare namespace NSSidePanel {
 
   type Component = Intergalactic.Component<'div', Props, Ctx> & {
     Header: Header.Component;
+    /**
+     * @deprecated. Use ButtonLink instead.
+     */
     Back: Back.Component;
     Body: Body.Component;
     Footer: Footer.Component;

diff --git a/semcore/side-panel/src/style/side-panel.shadow.css b/semcore/side-panel/src/style/side-panel.shadow.css
@@ -61,40 +61,40 @@ SClose {
   position: absolute;
   z-index: 1;
   right: var(--intergalactic-spacing-2x, 8px);
-  top: var(--intergalactic-spacing-2x, 8px);
-
-  & SAddon:only-child {
-    margin-left: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-    margin-right: calc(var(--intergalactic-spacing-2x, 8px) - 1px);
-  }
+  top: var(--intergalactic-spacing-1x, 4px);
 }
 
 SBack {
   max-width: 100%;
 }
 
 SHeader {
-  padding-left: var(--intergalactic-spacing-6x, 24px);
-  margin-bottom: var(--intergalactic-spacing-1x, 4px);
-  padding-right: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px));
-  margin-top: var(--intergalactic-spacing-1x, 4px);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom: var(--intergalactic-spacing-content-padding-xsmall, 4px);
+  padding-right: var(--intergalactic-spacing-14x, 56px);
+  padding-top: var(--intergalactic-spacing-content-padding-xsmall, 4px);
   min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
-  box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   box-sizing: border-box;
   flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
 }
 
 SFooter {
   min-height: 44px;
-  box-shadow: inset 0 1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
-  box-sizing: border-box;
+  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--intergalactic-spacing-content-gap-xlarge, 12px);
+  border-top: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
 }
 
 SBody {
   height: 100%;
   overflow: auto;
-  padding-left: var(--intergalactic-spacing-6x, 24px);
-  padding-bottom:var(--intergalactic-spacing-4x, 16px);
-  padding-right: var(--intergalactic-spacing-6x, 24px);
-  padding-top: var(--intergalactic-spacing-4x, 16px);
+  padding-left: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-bottom:var(--intergalactic-spacing-content-padding-large, 16px);
+  padding-right: var(--intergalactic-spacing-content-padding-xlarge-extended, 24px);
+  padding-top: var(--intergalactic-spacing-content-padding-large, 16px);
 }
diff --git a/stories/components/side-panel/docs/examples/access_to_internal_components.tsx b/stories/components/side-panel/docs/examples/access_to_internal_components.tsx
@@ -21,7 +21,7 @@ const Demo = (props: NSSidePanel.Props) => {
         <SidePanel.Overlay>
           <SidePanel.Panel>
             <SidePanel.Header>
-              <SidePanel.Title mt={3}>Taking the Stage</SidePanel.Title>
+              <SidePanel.Title>Taking the Stage</SidePanel.Title>
             </SidePanel.Header>
             <SidePanel.Body>
               <Text size={300} tag='p'>

diff --git a/stories/components/side-panel/docs/examples/advanced_example.tsx b/stories/components/side-panel/docs/examples/advanced_example.tsx
@@ -1,4 +1,5 @@
-import Button from '@semcore/ui/button';
+import ArrowLeft from '@semcore/icon/ArrowLeft/m';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import SidePanel from '@semcore/ui/side-panel';
 import type { NSSidePanel } from '@semcore/ui/side-panel';
 import React from 'react';
@@ -17,14 +18,16 @@ const Demo = (props: NSSidePanel.Props) => {
         closable={props.closable}
         disablePreventScroll={props.disablePreventScroll}
       >
-        <SidePanel.Header h='64px'>
-          <SidePanel.Back>Go to Tool Name</SidePanel.Back>
-          <SidePanel.Title mt={3}>SidePanel title</SidePanel.Title>
+        <SidePanel.Header>
+          <SidePanel.Title ellipsis={false}>
+            <ButtonLink color='text-hint' size={100} addonLeft={ArrowLeft} mr={2} />
+            SidePanel title
+          </SidePanel.Title>
         </SidePanel.Header>
         <SidePanel.Body>Content</SidePanel.Body>
-        <SidePanel.Footer justifyContent='center' pt={2} h='80px'>
+        <SidePanel.Footer>
           <Button size='l' use='primary'>Got it!</Button>
-          <Button size='l' ml={2}>Cancel</Button>
+          <Button size='l'>Cancel</Button>
         </SidePanel.Footer>
       </SidePanel>
     </>

diff --git a/stories/components/side-panel/docs/examples/basic_example.tsx b/stories/components/side-panel/docs/examples/basic_example.tsx
@@ -19,7 +19,7 @@ const Demo = (props: NSSidePanel.Props) => {
         disablePreventScroll={props.disablePreventScroll}
       >
         <SidePanel.Header>
-          <SidePanel.Title mt={3}>SidePanel Title</SidePanel.Title>
+          <SidePanel.Title>SidePanel Title</SidePanel.Title>
         </SidePanel.Header>
         <SidePanel.Body>
           <Text size={300} tag='p'>

diff --git a/stories/components/side-panel/docs/examples/disabling_overlay.tsx b/stories/components/side-panel/docs/examples/disabling_overlay.tsx
@@ -19,7 +19,7 @@ const Demo = (props: NSSidePanel.Props) => {
       >
         <SidePanel.Panel aria-label='SidePanel example' mt={20}>
           <SidePanel.Header>
-            <SidePanel.Title mt={3}>SidePanel Title</SidePanel.Title>
+            <SidePanel.Title>SidePanel Title</SidePanel.Title>
           </SidePanel.Header>
           <SidePanel.Body>
             <Text size={300} tag='p'>

diff --git a/stories/components/side-panel/docs/examples/portals.tsx b/stories/components/side-panel/docs/examples/portals.tsx
@@ -12,7 +12,7 @@ const Demo = () => {
       <SidePanel visible={visible} onClose={() => setVisible(false)} disablePortal>
         <SidePanel.Panel aria-label='Taking the stage' mt={20}>
           <SidePanel.Header>
-            <SidePanel.Title mt={3}>SidePanel Title</SidePanel.Title>
+            <SidePanel.Title>SidePanel Title</SidePanel.Title>
           </SidePanel.Header>
           <SidePanel.Body>
             <Text size={300} tag='p'>

diff --git a/stories/components/side-panel/tests/examples/additional-content-in-header.tsx b/stories/components/side-panel/tests/examples/additional-content-in-header.tsx
@@ -1,4 +1,5 @@
-import Button from '@semcore/ui/button';
+import ArrowLeft from '@semcore/icon/ArrowLeft/m';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import SidePanel from '@semcore/ui/side-panel';
 import { Text } from '@semcore/ui/typography';
 import React from 'react';
@@ -20,9 +21,8 @@ export default function Demo() {
           <SidePanel.Close />
 
           <SidePanel.Header>
-            <SidePanel.Back>Back</SidePanel.Back>
-
             <SidePanel.Title ellipsis={false}>
+              <ButtonLink color='text-hint' size={100} addonLeft={ArrowLeft} mr={2} />
               <Text>Static text: </Text>
               <Text use='secondary' ellipsis={withEllipsis} w={80}>{dynamicText}</Text>
             </SidePanel.Title>

diff --git a/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx b/stories/components/side-panel/tests/examples/side-panel-additional-states.tsx
@@ -1,8 +1,10 @@
+import ArrowLeft from '@semcore/icon/ArrowLeft/m';
 import FileExportM from '@semcore/icon/FileExport/m';
 import { Box, Flex } from '@semcore/ui/base-components';
-import Button from '@semcore/ui/button';
+import Button, { ButtonLink } from '@semcore/ui/button';
 import SidePanel from '@semcore/ui/side-panel';
 import Tooltip from '@semcore/ui/tooltip';
+import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 export type SidePanelDemoProps = {
@@ -12,7 +14,6 @@ export type SidePanelDemoProps = {
   withAdditionalHeaderContent?: boolean;
   withTooltipInBody?: boolean;
   withFooter?: boolean;
-  backText?: string;
   backWMax?: number;
   animationsDisabled?: boolean;
   forcedAdvancedMode?: boolean;
@@ -25,22 +26,26 @@ export const defaultSidePanelDemoProps: SidePanelDemoProps = {
   withAdditionalHeaderContent: false,
   withTooltipInBody: false,
   withFooter: false,
-  backText: 'Go to Tool Name',
   animationsDisabled: false,
   forcedAdvancedMode: false,
 };
 
 const Demo = (props: SidePanelDemoProps) => {
   const [visible, setVisible] = React.useState(false);
-  const backText = props.backText ?? defaultSidePanelDemoProps.backText;
+  const ellipsisProps = {
+    'ellipsis': props.ellipsisTitle,
+    'ellipsis:maxLine': props.ellipsisMaxLine && props.ellipsisMaxLine > 1 ? props.ellipsisMaxLine : undefined,
+  };
 
   const content = (
     <>
       {props.withClose && <SidePanel.Close />}
       <SidePanel.Header>
-        <SidePanel.Back wMax={props.backWMax}>{backText}</SidePanel.Back>
-        <SidePanel.Title w={100} ellipsis={props.ellipsisTitle} ellipsis:maxLine={props.ellipsisMaxLine}>
-          Heading 6, 16px Heading 6, 16px
+        <SidePanel.Title ellipsis={false}>
+          <ButtonLink color='text-hint' size={100} addonLeft={ArrowLeft} mr={2} />
+          <Text w={100} {...ellipsisProps}>
+            Heading 6, 16px Heading 6, 16px
+          </Text>
         </SidePanel.Title>
         {props.withAdditionalHeaderContent && (
           <Flex direction='column'>
@@ -61,9 +66,9 @@ const Demo = (props: SidePanelDemoProps) => {
         )}
       </SidePanel.Body>
       {props.withFooter && (
-        <SidePanel.Footer justifyContent='center' pt={2}>
+        <SidePanel.Footer>
           <Button use='primary'>Primary</Button>
-          <Button ml={2}>Cancel</Button>
+          <Button>Cancel</Button>
         </SidePanel.Footer>
       )}
     </>

diff --git a/stories/components/side-panel/tests/side-panel.stories.tsx b/stories/components/side-panel/tests/side-panel.stories.tsx
@@ -22,7 +22,6 @@ export const AdditionalStates: StoryObj<typeof defaultSidePanelDemoProps> = {
     withAdditionalHeaderContent: { control: { type: 'boolean' } },
     withTooltipInBody: { control: { type: 'boolean' } },
     withFooter: { control: { type: 'boolean' } },
-    backText: { control: { type: 'text' } },
     backWMax: { control: { type: 'number' } },
   },
 };

diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
@@ -3334,7 +3334,8 @@
       "dropdown",
       "dropdown-menu",
       "input-tags",
-      "pills"
+      "pills",
+      "side-panel"
     ]
   },
   {
@@ -3355,7 +3356,8 @@
       "bulk-textarea",
       "dropdown",
       "modal",
-      "pills"
+      "pills",
+      "side-panel"
     ]
   },
   {
@@ -3385,7 +3387,8 @@
     "components": [
       "bulk-textarea",
       "feature-popover",
-      "notice-bubble"
+      "notice-bubble",
+      "side-panel"
     ]
   },
   {
@@ -3401,7 +3404,9 @@
     "name": "--intergalactic-spacing-content-padding-xlarge-extended",
     "value": "24px",
     "description": "Extended extra large padding for content inside controls and surfaces.",
-    "components": []
+    "components": [
+      "side-panel"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-padding-xxlarge",
@@ -3472,7 +3477,8 @@
     "description": "Extra large gap between elements, rows, or columns.",
     "components": [
       "notice-bubble",
-      "pagination"
+      "pagination",
+      "side-panel"
     ]
   },
   {