diff --git a/packages/twenty-ui/src/input/button/components/Button.tsx b/packages/twenty-ui/src/input/button/components/Button.tsx
index 241482a96b..35531cecfe 100644
--- a/packages/twenty-ui/src/input/button/components/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button.tsx
@@ -360,17 +360,43 @@ const StyledSoonPill = styled(Pill)`
   margin-left: auto;
 `;
 
-const StyledShortcutLabel = styled.div`
-  color: ${({ theme }) => theme.font.color.light};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
+const StyledSeparator = styled.div<{
+  buttonSize: ButtonSize;
+  accent: ButtonAccent;
+}>`
+  background: ${({ theme, accent }) => {
+    switch (accent) {
+      case 'blue':
+        return theme.color.blue30;
+      case 'danger':
+        return theme.border.color.danger;
+      default:
+        return theme.font.color.light;
+    }
+  }};
+  height: ${({ theme, buttonSize }) =>
+    theme.spacing(buttonSize === 'small' ? 2 : 4)};
+  margin: 0;
+  width: 1px;
 `;
 
-const StyledSeparator = styled.div<{ buttonSize: ButtonSize }>`
-  background: ${({ theme }) => theme.border.color.light};
-  height: ${({ theme, buttonSize }) =>
-    theme.spacing(buttonSize === 'small' ? 3 : 4)};
-  margin: 0 ${({ theme }) => theme.spacing(1)};
-  width: 1px;
+const StyledShortcutLabel = styled.div<{
+  variant: ButtonVariant;
+  accent: ButtonAccent;
+}>`
+  color: ${({ theme, variant, accent }) => {
+    switch (accent) {
+      case 'blue':
+        return theme.color.blue30;
+      case 'danger':
+        return variant === 'primary'
+          ? theme.border.color.danger
+          : theme.color.red40;
+      default:
+        return theme.font.color.light;
+    }
+  }};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
 export const Button = ({
@@ -419,8 +445,10 @@ export const Button = ({
       {title}
       {shortcut && (
         <>
-          <StyledSeparator buttonSize={size} />
-          <StyledShortcutLabel>{shortcut}</StyledShortcutLabel>
+          <StyledSeparator buttonSize={size} accent={accent} />
+          <StyledShortcutLabel variant={variant} accent={accent}>
+            {shortcut}
+          </StyledShortcutLabel>
         </>
       )}
       {soon && <StyledSoonPill label="Soon" />}
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
index 5ad32a17e8..d53758a94c 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
@@ -44,7 +44,7 @@ export const Default: Story = {
 };
 
 export const Catalog: CatalogStory<Story, typeof Button> = {
-  args: { title: 'Filter', Icon: IconSearch },
+  args: { title: 'Filter', Icon: IconSearch, shortcut: '' },
   argTypes: {
     size: { control: false },
     variant: { control: false },
@@ -55,7 +55,6 @@ export const Catalog: CatalogStory<Story, typeof Button> = {
     soon: { control: false },
     position: { control: false },
     className: { control: false },
-    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -277,7 +276,6 @@ export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
     fullWidth: { control: false },
     soon: { control: false },
     position: { control: false },
-    shortcut: { control: false },
   },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
@@ -288,6 +286,20 @@ export const ShortcutCatalog: CatalogStory<Story, typeof Button> = {
           values: ['small', 'medium'] satisfies ButtonSize[],
           props: (size: ButtonSize) => ({ size }),
         },
+        {
+          name: 'accents',
+          values: ['default', 'blue', 'danger'] satisfies ButtonAccent[],
+          props: (accent: ButtonAccent) => ({ accent }),
+        },
+        {
+          name: 'variants',
+          values: [
+            'primary',
+            'secondary',
+            'tertiary',
+          ] satisfies ButtonVariant[],
+          props: (variant: ButtonVariant) => ({ variant }),
+        },
       ],
     },
   },