diff --git a/packages/react-core/src/components/BackToTop/BackToTop.tsx b/packages/react-core/src/components/BackToTop/BackToTop.tsx
index d47c2899d98..48d82742a41 100644
--- a/packages/react-core/src/components/BackToTop/BackToTop.tsx
+++ b/packages/react-core/src/components/BackToTop/BackToTop.tsx
@@ -82,7 +82,7 @@ const BackToTopBase: React.FunctionComponent = ({
onClick={handleClick}
{...props}
>
- } iconPosition="right">
+ } iconPosition="end">
{title}
diff --git a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx
index cd3707609b0..4eb9ac41732 100644
--- a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx
+++ b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx
@@ -135,7 +135,7 @@ test('Passes correct variant to button child component', () => {
test('Passes correct iconPosition to button child component', () => {
render();
- expect(screen.getByText('iconPosition: right')).toBeVisible();
+ expect(screen.getByText('iconPosition: end')).toBeVisible();
});
test('Passes correct icon to button child component', () => {
diff --git a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap
index fb3781425e7..144783a33c1 100644
--- a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap
+++ b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Matches the snapshot 1`] = `
isInline: undefined
- iconPosition: right
+ iconPosition: end
, 'r
type?: 'button' | 'submit' | 'reset';
/** Adds button variant styles */
variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
- /** Sets position of the link icon */
- iconPosition?: 'left' | 'right';
+ /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
+ iconPosition?: 'start' | 'end' | 'left' | 'right';
/** Adds accessible text to the button. */
'aria-label'?: string;
/** Icon for the button. Usable by all variants except for plain. */
@@ -108,7 +108,7 @@ const ButtonBase: React.FunctionComponent = ({
isInline = false,
type = ButtonType.button,
variant = ButtonVariant.primary,
- iconPosition = 'left',
+ iconPosition = 'start',
'aria-label': ariaLabel = null,
icon = null,
ouiaId,
@@ -183,11 +183,11 @@ const ButtonBase: React.FunctionComponent = ({
)}
{variant === ButtonVariant.plain && children === null && icon ? icon : null}
- {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (
+ {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (
{icon}
)}
{children}
- {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
+ {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (
{icon}
)}
{countOptions && (
diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
index badb9e33d91..e808916fd07 100644
--- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
+++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
@@ -30,7 +30,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
}>
Link
{' '}
- } iconPosition="right">
+ } iconPosition="end">
Link
{' '}
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index 0a06722bb86..6efc898e879 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -168,7 +168,7 @@ class CardGridDemo extends React.Component {
- } iconPosition="right">
+ } iconPosition="end">
View all set up cluster steps
@@ -196,7 +196,7 @@ class CardGridDemo extends React.Component {
- } iconPosition="right">
+ } iconPosition="end">
View all guided tours
@@ -227,7 +227,7 @@ class CardGridDemo extends React.Component {
- } iconPosition="right">
+ } iconPosition="end">
View all quick starts
@@ -261,7 +261,7 @@ class CardGridDemo extends React.Component {
- } iconPosition="right">
+ } iconPosition="end">
View all learning resources