diff --git a/packages/clay-button/docs/button.mdx b/packages/clay-button/docs/button.mdx
index a54017db24..ea49f4f1e9 100644
--- a/packages/clay-button/docs/button.mdx
+++ b/packages/clay-button/docs/button.mdx
@@ -6,13 +6,10 @@ packageNpm: '@clayui/button'
 ---
 
 import {
-	ButtonBeta,
-	ButtonBetaDark,
 	ButtonClayDark,
 	ButtonDisplayTypes,
 	ButtonGroup,
 	ButtonIcon,
-	ButtonTranslucent,
 } from '$packages/clay-button/docs/index';
 
 <div class="nav-toc-absolute">
@@ -21,10 +18,6 @@ import {
 -   [Display Types](#display-types)
 -   [Group](#group)
 -   [Icon](#icon)
--   [Translucent](#btn-translucent)
--   [Clay Dark](#btn-clay-dark)
--   [Beta (Deprecated)](#btn-beta)
-    -   [Dark (Deprecated)](#btn-beta-dark)
 
 </div>
 </div>
@@ -52,39 +45,3 @@ Use the [`spaced`](#api-spaced) property to create spacing between buttons.
 You can use the high-level component `ClayButtonWithIcon` to create a button with only an icon. If you need an icon and text, you need to compose with `ClayIcon`
 
 <ButtonIcon />
-
-## Translucent(#btn-translucent)
-
-The boolean attribute `translucent` renders a button with an opaque background color optimized for light backgrounds. It renders as an extra small button with rounded borders.
-
-<ButtonTranslucent />
-
-## Dark(#btn-clay-dark)
-
-The boolean attribute `dark` renders a button with an opaque background color optimized for dark backgrounds. It adds the class `clay-dark` to the button. The class `clay-dark` can be added to the parent element to make buttons contained inside render the dark variant. When adding `clay-dark` to the parent element, the `dark` attribute on the button should be omitted.
-
-<ButtonClayDark />
-
-## Beta (Deprecated)(#btn-beta)
-
-<div class="clay-site-alert alert alert-warning">
-	The property <code>displayType="beta"</code> has been deprecated in favor of
-	semantic attributes <code>displayType="info"</code> and{' '}
-	<code>translucent</code>.
-</div>
-
-A component to indicate beta features in DXP. The Button variant should be used when the component can be placed close to a non-interactive UI element, such as a title or a section. Also, a default popover is shown if the user interacts with it.
-
-<ButtonBeta />
-
-### Beta Dark (Deprecated)(#btn-beta-dark)
-
-<div class="clay-site-alert alert alert-warning">
-	The property <code>displayType="beta-dark"</code> has been deprecated in
-	favor of semantic attributes <code>dark</code>,{' '}
-	<code>displayType="info"</code> and <code>translucent</code>.
-</div>
-
-`btn-beta-dark` is a dark variant of `btn-beta` to be used with dark backgrounds.
-
-<ButtonBetaDark />
diff --git a/packages/clay-button/docs/index.js b/packages/clay-button/docs/index.js
index ccbd9d7b2d..e6e2dc6891 100644
--- a/packages/clay-button/docs/index.js
+++ b/packages/clay-button/docs/index.js
@@ -19,14 +19,11 @@ const ButtonDisplayTypesCode = `const Component = () => {
 			<ClayButton displayType="secondary">
 				Button Secondary
 			</ClayButton>
-			<ClayButton displayType={null}>
-				Base Button
-			</ClayButton>
 			<ClayButton displayType="link">
 				Button Link
 			</ClayButton>
-			<ClayButton displayType="unstyled">
-				Button Unstyled
+			<ClayButton borderless>
+				Button Borderless
 			</ClayButton>
 		</>
 	);
@@ -52,8 +49,8 @@ const ButtonJSPCode = `<clay:button
 />
 
 <clay:button
-	displayType="unstyled"
-	label="Button Unstyled"
+	displayType="outline-borderless"
+	label="Button Borderless"
 />`;
 
 const ButtonDisplayTypes = () => {
@@ -132,198 +129,4 @@ const ButtonIcon = () => {
 	return <Editor code={code} imports={buttonIconImportsCode} scope={scope} />;
 };
 
-const buttonTranslucentImportsCode = `import ClayButton from '@clayui/button';
-import ClayIcon from '@clayui/icon;'`;
-
-const ButtonTranslucentCode = `const Component = () => {
-	return (
-		<>
-			<ClayButton displayType="primary" translucent>
-				<span className="inline-item">
-					{'Primary'}
-				</span>
-			</ClayButton>
-
-			<ClayButton displayType="success" translucent>
-				<span className="inline-item">
-					{'Success'}
-				</span>
-			</ClayButton>
-
-			<ClayButton displayType="info" translucent>
-				<span className="inline-item">
-					{'Info'}
-				</span>
-
-				<span className="inline-item inline-item-after">
-					<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
-				</span>
-			</ClayButton>
-
-			<ClayButton displayType="warning" translucent>
-				<span className="inline-item">
-					{'Warning'}
-				</span>
-
-				<span className="inline-item inline-item-after">
-					<ClayIcon spritemap={spritemap} symbol="warning-full" />
-				</span>
-			</ClayButton>
-
-			<ClayButton displayType="danger" translucent>
-				<span className="inline-item">
-					{'Danger'}
-				</span>
-			</ClayButton>
-		</>
-	);
-}
-
-render(<Component />);`;
-
-const ButtonTranslucent = () => {
-	const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
-	const code = ButtonTranslucentCode;
-
-	return (
-		<Editor
-			code={code}
-			imports={buttonTranslucentImportsCode}
-			scope={scope}
-		/>
-	);
-};
-
-// START
-
-const buttonClayDarkImportsCode = `import ClayButton from '@clayui/button';
-import ClayIcon from '@clayui/icon;'`;
-
-const ButtonClayDarkCode = `const Component = () => {
-	return (
-		<>
-			<div className="bg-dark clay-dark p-2">
-				<ClayButton displayType="primary" translucent>
-					<span className="inline-item">
-						{'Primary'}
-					</span>
-				</ClayButton>
-
-				<ClayButton displayType="success" translucent>
-					<span className="inline-item">
-						{'Success'}
-					</span>
-				</ClayButton>
-
-				<ClayButton displayType="info" translucent>
-					<span className="inline-item">
-						{'Info'}
-					</span>
-
-					<span className="inline-item inline-item-after">
-						<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
-					</span>
-				</ClayButton>
-
-				<ClayButton displayType="warning" translucent>
-					<span className="inline-item">
-						{'Warning'}
-					</span>
-
-					<span className="inline-item inline-item-after">
-						<ClayIcon spritemap={spritemap} symbol="warning-full" />
-					</span>
-				</ClayButton>
-
-				<ClayButton displayType="danger" translucent>
-					<span className="inline-item">
-						{'Danger'}
-					</span>
-				</ClayButton>
-			</div>
-		</>
-	);
-}
-
-render(<Component />);`;
-
-const ButtonClayDark = () => {
-	const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
-	const code = ButtonClayDarkCode;
-
-	return (
-		<Editor code={code} imports={buttonClayDarkImportsCode} scope={scope} />
-	);
-};
-
-// END
-
-const buttonBetaImportsCode = `import ClayButton from '@clayui/button';
-import ClayIcon from '@clayui/icon;'`;
-
-const ButtonBetaCode = `const Component = () => {
-	return (
-		<>
-			<ClayButton className="rounded-circle" displayType="beta" size="xs">
-				<span className="inline-item">
-					{'Beta'}
-				</span>
-
-				<span className="inline-item inline-item-after">
-					<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
-				</span>
-			</ClayButton>
-		</>
-	);
-}
-
-render(<Component />);`;
-
-const ButtonBeta = () => {
-	const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
-	const code = ButtonBetaCode;
-
-	return <Editor code={code} imports={buttonBetaImportsCode} scope={scope} />;
-};
-
-const buttonBetaDarkImportsCode = `import ClayButton from '@clayui/button';
-import ClayIcon from '@clayui/icon;'`;
-
-const ButtonBetaDarkCode = `const Component = () => {
-	return (
-		<>
-			<div className="bg-dark p-2">
-				<ClayButton className="rounded-circle" displayType="beta-dark" size="xs">
-					<span className="inline-item">
-						{'Beta'}
-					</span>
-
-					<span className="inline-item inline-item-after">
-						<ClayIcon spritemap={spritemap} symbol="info-panel-open" />
-					</span>
-				</ClayButton>
-			</div>
-		</>
-	);
-}
-
-render(<Component />);`;
-
-const ButtonBetaDark = () => {
-	const scope = {ClayButton, ClayButtonWithIcon, ClayIcon};
-	const code = ButtonBetaDarkCode;
-
-	return (
-		<Editor code={code} imports={buttonBetaDarkImportsCode} scope={scope} />
-	);
-};
-
-export {
-	ButtonDisplayTypes,
-	ButtonGroup,
-	ButtonIcon,
-	ButtonBeta,
-	ButtonBetaDark,
-	ButtonTranslucent,
-	ButtonClayDark,
-};
+export {ButtonDisplayTypes, ButtonGroup, ButtonIcon};