diff --git a/changelogs/upcoming/7455.md b/changelogs/upcoming/7455.md
index 079c4d209b2..556da2a60c7 100644
--- a/changelogs/upcoming/7455.md
+++ b/changelogs/upcoming/7455.md
@@ -1 +1 @@
-- Updated `EuiResizableButton` with a new `showIndicator` prop, which allows replacing the default grab handle with a plain border
+- Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border`
diff --git a/src-docs/src/views/resizable_container/resizable_button_indicator.tsx b/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
index 2fc8cfa05ba..32a39e91530 100644
--- a/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
+++ b/src-docs/src/views/resizable_container/resizable_button_indicator.tsx
@@ -18,7 +18,7 @@ export default () => (
{text}
-
+
(
{text}
-
+
{text}
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 5a0cb24ada5..f8469e0096e 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -521,9 +521,9 @@ export const ResizableContainerExample = {
indicator as a UI hint. For use cases where the resize behavior is
"nice to have" but not a primary UX focus, or where there are many
other busy UI elements on the page, you can set{' '}
- {'showIndicator={false}'} to display a subdued
- border element instead, which only provides resize affordance on
- hover or focus.
+ indicator="border" to display a subdued border
+ element instead, which only provides resize affordance on hover or
+ focus.
>
),
@@ -532,7 +532,7 @@ export const ResizableContainerExample = {
props: { EuiResizableButton },
snippet: ``,
},
{
diff --git a/src/components/flyout/flyout_resizable.tsx b/src/components/flyout/flyout_resizable.tsx
index af55fe350b5..7005aafd69c 100644
--- a/src/components/flyout/flyout_resizable.tsx
+++ b/src/components/flyout/flyout_resizable.tsx
@@ -147,7 +147,7 @@ export const EuiFlyoutResizable = forwardRef(
>
= {
component: EuiResizableButton,
args: {
// Component defaults
- showIndicator: true,
+ indicator: 'handle',
alignIndicator: 'center',
disabled: false,
isHorizontal: false,